图片轮播,一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能做出来得到效果。但是你会发现当面对不同的需求的时候又要重新写一个轮播。很是麻烦的对吧。LZ也是这样学习过来的,发现自己写的很多轮播的思路都不一样了。这次写出的下一次也许就写不出来了,或者说是用更好的方式来实现了。下面一起来总结下都有什么样的需求。
二、需求:
1) 首先是要能循环显示出来(不考虑循环效果)。
2)鼠标移到图片上时停止切换,移开之后又自动开始循环。
3)带有图片标记,两个作用(1、可以给用户提示一共多少张,2、可以知道当前展示得到是第几张)。
4)带有切换按钮,当用按钮点击的时候就取消自动循环。让用户自由操作(切换按钮需要以上后出现,移开消失)。
三、思路:
以前再最开始的时候做轮播是直接改变的图片 url 地址,但是现在不能这样做了。为什么?因为没当变化一下url地址浏览器就会发送一个请求道服务器区拉取这个图片,这样对于性能来说是很不好的。所以不能这样做。Now 那就通过移动图片吧。我的思路(也是在借鉴的基础上)将所有的图片联合成一副大的图片,这样只需要移动一副大的图片就可以实现轮播了。下面一起来看看怎样实现吧!
四、实现步骤:
HTML:
<!--picture-loop-wrapper-->
<div class="picture-loop-wrapper"> //外部循环显示盒子
<ul class="imgBox"> //组合长图盒子
<li id="img1"><a href="#"><img src="img/1.jpg"></a></li>
<li id="img2"><a href="#"><img src="img/2.jpg"></a></li>
<li id="img3">