js轮播图

用js实现图片轮播的效果

之前拿css3的动画实现了一次轮播图，但是还是有很多地方不能完善，比如说不能左右按键切换

---

js实现轮播图的准备

1：若干张图片
2：用html构建大致的界面
3：用css样式进行渲染
4：js的DOM操作

---

一：用html构建出轮廓

a：先构建一个大盒子，用来确定整体轮播图的位置等要素
b：对图片和下标数字分别放两个小盒子
c：准备左右箭头的超链接

<div id="dahezi">            <div id="tphz" style= "left:-600px">                <img src=5.jpg alt="1" />                <img src=1.jpg alt="1" />                <img src=2.jpg alt="2" />                <img src=3.jpg alt="3" />                <img src=4.jpg alt="4" />                <img src=5.jpg alt="5" />                <img src=1.jpg alt="5" />            </div>            <div id="szhz">                <span index="1" class="on"></span>                    <span index="2"></span>                    <span index="3"></span>                    <span index="4"></span>                    <span index="5"></span>             </div>            <a href="javascript:;" id="prev" class="arrow">&lt;</a>            <a href="javascript:;" id="next" class="arrow">&gt;</a>        </div>

二：css添加样式

a：设置html和body的border和padding以获取更好的观赏效果
b：利用overflow把多与的图片隐藏，只显示一张图
c：图片盒子绝对定位，便于操作（同理数字盒子也是一样）

 #dahezi {            width: 600px;            height: 400px;            border: 3px;            overflow: hidden;              position: relative;

这里的图片盒子宽度=（每一个图片宽度）*（用于轮播的图片数+2）（+2的原因是开头末尾各一个假图衔接）

#tphz {            width: 4200px;            height: 400px;            position: absolute;            z-index: 1;        }

每一张图片的样式采用左浮动定位（从左往右播）便于计算和操作

 #tphz img {            width: 600px;            height: 400px;            float: left;        }

数字盒子主要是设置的层级要大于图片盒子，不然只能显示但是不能操作，定位方式也是绝对定位

#szhz {            position: absolute;            height: 10px;            width: 100px;            z-index: 2;            bottom: 20px;            left: 500px;        }

三：js操作让盒子动起来

a：通过document获取图片、数字盒子和左右键的id

var tphz = document.getElementById('tphz');var szhz = document.getElementById('szhz').getElementsByTagName('span');var prev = document.getElementById('prev');var next = document.getElementById('next');

b:给左右键添加onclick属性，点击左右键的时候使图片跟着动（数字盒子也是同样的道理）
c：图片盒子的移动，相当与是在一整个盒子的最左边，运动到视野的最右边的时候，然后把整个盒子拉回到初始位置，这样就可以实现轮播的效果，那么就只需要做一个判断，就是当盒子的左边界恰好等于宽度，就把盒子拉回去，然后这时候要移动的距离就是（盒子的宽度-假图的宽度），然后给盒子加一个计时器，就可以实现自由无线轮播了。

function animate(offset) {    var newLj = parseInt(tphz.style.left) + offset;    tphz.style.left = newLj + 'px';    if (newLj > -600) {        tphz.style.left = -3000 + 'px';    }    if (newLj < -3000) {        tphz.style.left = -600 + 'px';    }}

function play() {    timer = setInterval(function() {    next.onclick();/*这个执行无限次*/    }, 2000)}

但是在定时器的使用的时候，不能点击太过于频繁，那样的话浏览器会现鬼畜，这个就是函数节流/函数防抖的知识，加以相对的处理，这里不过多说。
d：然后添加特效，使鼠标移入的时候轮播停止，移除的时候正常轮播。实现这个就需要一个timer变量来监控定时器，在鼠标移入的时候清楚定时器，移除恢复

function play() {    timer = setInterval(function() {        next.onclick();    }, 2000)}

function stop() {    clearInterval(timer);}

dahezi.onmouseover = stop;dahezi.onmouseout = play;

上面的操作就可以实现图片的轮播效果了

总结一下js和css的轮播图的区别

1：让图片动起来，js是靠定时器把图片隔一段时间往前拉一定的距离，css是图片一直在偏移（js是图片盒子整体动，css是图片单个动）
2：css的轮播图更加的符合这个名字（在运动的时候很明显的看到是一张接着一张），js的感觉是闪现的（一张结束感觉瞬间消失新图瞬间出现）
3：从制作成本来说，css更好一些，从维护角度来说，加图片什么的，js更方便一些