Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简。为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享一下
最终实现界面如下:
页面加载时,自动轮播,轮播鼠标悬停在整个banner容器的时候,两边会显示向左,向右按钮,鼠标悬停在中下方索引圆圈的上面,自动跳转到相应的图片。
banner容器里面包含了图片列表img,索引圆圈 num,还有按钮两个btn
<div class="banner">
<ul class="img">
<li><img src="image/1.jpg" alt=""/></li>
<li><img src="image/2.jpg" alt="" /></li>
<li><img src="image/3.jpg" alt="" /></li>