思路：设置父容器（一定宽度，一定高度，相对定位，子容器超出部分进行隐藏），子容器图片并排（浮动，绝对定位，每次点击进行相应的左或右偏移量）

1.html:

 <!DOCTYPE html>

 <html>

 <head>

     <title>Carousel figure</title>

     <meta charset="utf-8">

     <!-- 浏览器标签页显示图标 -->

     <link rel="icon" type="image/x-icon" href="./images/1.jpg">

     <link rel="stylesheet" type="text/css" href="1.css">

 </head>

 <body>

     <!-- 构建container父容器 -->

     <div class="container">

         <!-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播-->

         <div class="pic" style="left: 0px;">

             <!-- 图片部分，建议均加上alt，利于seo -->

             <img src="./images/1.jpg" alt="1">

             <img src="./images/2.jpg" alt="2">

             <img src="./images/3.jpg" alt="3">

             <img src="./images/4.jpg" alt="4">

             <img src="./images/5.jpg" alt="5">

             <img src="./images/6.jpg" alt="6">

         </div>

         <!-- 箭头部分，实现下一张，上一张效果 -->

         <a href="javascript:void(0)" class="arrow arrow_left">&lt;</a>

         <a href="javascript:void(0)" class="arrow arrow_right">&gt;</a>

         <!-- 当前图片id显示 -->

         <div class="point">

             <span class="on">1</span>

             <span>2</span>

             <span>3</span>

             <span>4</span>

             <span>5</span>

             <span>6</span>

         </div>

     </div>

     <!-- html body部分加载完成，最后调用js,进行操作；否则无法有效操作 -->

     <script type="text/javascript" src="1.js"></script>

 </body>

 </html>

1.css:

 /* body部分清一下外边距与内边距，不建议*（可能影响效率），主流大网站均未采用*进行清边距 */

 body{

     margin:;

     padding:;

 }

 a{

     text-decoration: none;

     color: green;

 }

 a:visited{

     color: siver;

 }

 a:hover{

     color: gold;

 }

 .container{

     /* container采用相对定位relative，便于子容器进行绝对定位absolute */

     position: relative;

     /* 左右居中对齐 */

     margin: 0 auto;

     /* 每张图片的宽度高度均为320px, */

     width: 320px;

     height: 320px;

     /* 图片超出部分隐藏 */

     overflow: hidden;

     /* border: 1px solid  */

     /* 设置阴影：水平阴影偏离0，垂直阴影偏移0，模糊距离10px，颜色 */

     box-shadow: 0 0 10px orange;

 }

 .pic{

     position: absolute;

     /* 6张图片进行排放，故宽度为1920px */

     width: 1920px;

     height: 320px;

 }

 .pic img{

     /* 设置左浮动，使6张图片排成一排 */

     float: left;

     width: 320px;

     height: 320px;

 }

 .arrow{

     display: block;

     border-radius: 50%;

     /* 采用字符实体，故设置字体使用font-size */

     font-size: 60px;

     默认隐藏箭头，

     display: none;

 }

 /* 当悬浮在container区域显示箭头 */

 .container:hover .arrow{

     display: block;

 }

 /* 当悬浮在arrow区域显示箭头 */

 .container .arrow:hover{

     background-color: rgba(0, 0, 0, 0.2);

 }

 .arrow_left{

     position: absolute;

     left: 30px;

     top: 40%;

     text-align: center;

     width: 80px;

     height: 80px;

 }

 .arrow_right{

     position: absolute;

     right: 30px;

     top: 40%;

     text-align: center;

     width: 80px;

     height: 80px;

 }

 .point{

     position: absolute;

     margin: 280px auto 0 80px;

 }

 .point span{

     display: inline-block;

     width: 30px;

     height: 30px;

     border-radius: 50%;

     background-color: orange;

     text-align: center;

     cursor: pointer;

 }

 .point span.on{

     background-color: red;

 }

 .point span:active{

     background-color: gold;

 }

1.js:

 // 获取pic组第一个

 var pic = document.getElementsByClassName('pic')[0];

 // 获取arrow_left

 var arrow_left = document.getElementsByClassName('arrow_left')[0];

 // 获取arrow_right

 var arrow_right = document.getElementsByClassName('arrow_right')[0];

 // 获取span组

 var points=document.getElementsByTagName('span');

 var index=0;

 // 点击右箭头，下一张图片

 arrow_right.onclick = function() {

     next_pic();

 }

 // 点击左箭头，上一张图片

 arrow_left.onclick = function() {

     prev_pic();

 }

 // 函数实现下一张浏览效果

 function next_pic() {

     // 最后一张，下一张变为第一张（left值为0）

     if (parseInt(pic.style.left) === -1600) {

         pic.style.left = 0 + "px";

     } else {

         // 下一张

         var pos = parseInt(pic.style.left) - 320;

         pic.style.left = pos + 'px';

     }

     index++;

     if(index>5){

         index=0;

     }

     showPoint();

 }

 function prev_pic() {

     if (parseInt(pic.style.left) === 0) {

         pic.style.left = -1600 + "px";

     } else {

         var pos = parseInt(pic.style.left) + 320;

         pic.style.left = pos + 'px';

     }

     index--;

     if(index<0){

         index=5;

     }

     showPoint();

 }

 var timer = null;

 // 自动图片轮播，设置1s间隔

 function autoPlay() {

     // timer=setInterval(function(){

     //     next_pic();

     // },1000);

     timer = setInterval(next_pic, 1000);

 }

 autoPlay();

 var container = document.getElementsByClassName('container')[0];

 // 鼠标移动到container区域，暂停自动播放

 container.onmouseenter = function() {

     clearInterval(timer);

 }

 // 鼠标离开container区域，自动播放

 container.onmouseleave = function() {

     autoPlay();

 }

 // 实现点击相应的小按钮图片跳转到相应图片功能

 for (var i = 0; i < points.length; i++) {

     (function(i){

         points[i].onclick=function (){

             //0~0,1~-320...5~-1600

             pic.style.left=-320*i +"px";

         };

         index=i;

         //无法点击point，使其变色

         showPoint();

     }

     )(i);

 }

 // 实现相应图片对应相应小按钮功能

 function showPoint(){

     for(var i=0;i<points.length;i++){

         points[i].className="";

     }

     points[index].className="on";

 }

原生js实现图片轮播效果的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  3. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  4. 原生Javascript实现图片轮播效果

    首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...

  5. 原生JS实现图片轮播

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  7. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  8. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  9. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

随机推荐

  1. dp单调性优化

    跟着书上的思路学习dp的单调性优化觉得还是很容易想的. 数据范围: dp,数据范围是百万,这应该是O(n)的算法了. 首先不难想到设f[i]表示到第i个百米所能达到的最大能量,那么f[n]即为所求. ...

  2. 终于碰到iOS对象集合深拷贝的坑

    从原始数组,拆分排列组合成新数组,同时给新的数组中的模型元素追加字段,数组的容量翻倍,如果不用深拷贝,后面追加的值就把前面的值覆盖了 UnitModel *model1 = [UnitModel ne ...

  3. 转：JVM 内存初学 (堆(heap)、栈(stack)和方法区(method) )

    原文地址:JVM 内存初学 (堆(heap).栈(stack)和方法区(method) ) 博主推荐 深入浅出JVM 这本书 先了解具体的概念:JAVA的JVM的内存可分为3个区:堆(heap).栈( ...

  4. ASMCMD报错解决：sh: /u01/app/11.2.4/grid/bin/clsecho: No such file or directory

    sh: /u01/app/11.2.4/grid/bin/clsecho: No such file or directory 在登录asmcmd时报此错误,尝试解决,刷新oracle_sid也不行 ...

  5. LeetCode 590 N-ary Tree Postorder Traversal 解题报告

    题目要求 Given an n-ary tree, return the postorder traversal of its nodes' values. 题目分析及思路 题目给出一棵N叉树,要求返 ...

  6. MonkeyRunner_运行脚本(一)

    前提:环境已部署, 使用数据线连接上真机  一.使用cmd窗口单步执行monkeyrunner命令 打开cmd窗口,输入monkeyrunner (前提设置好环境变量):然后按照monkeyrunne ...

  7. Qt5线程错误：QThread: Destroyed while thread is still running（执行runThread->exit(0)）

    背景: 当前类,编写接收子线程类信号的槽函数和触发子线程类执行的信号: 新建一个子线程类,编写槽函数和信号,MyClass *m_MyClass=new MyClass(): 新建一个线程对象QThr ...

  8. 洛谷P3248 树 [HNOI2016] 主席树+倍增+分治

    正解:主席树+倍增+分治 解题报告: 传送门! 首先看到这题会想到之前考过的这题 但是那题其实简单一些,,,因为那题只要用个分治+预处理就好,只是有点儿思维难度而已 这题就不一样,因为它说了是按照原树 ...

  9. CSS中position属性介绍（新增sticky）

    position的含义是指定类型,取值类型可以有:static.relative.absolute.fixed.inherit 和 sticky,这里sticky是CSS3新发布的一个属性. 1.po ...

  10. 10.8-uC/OS-III内部任务（中断处理任务 OS_IntQTask()）

    1.当设置OS_CFG.H中的OS_CFG_ISR_POST_DEFERRED_EN为1时, uC/OS-III就会创建一个任务,它的作用是尽快完成ISR中对post函数的调用, 将信号量.消息等对象 ...