用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"><</a>
<a href="javascript:;" id="next" class="arrow">></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更方便一些