Jquery+css实现图片无缝滚动轮播
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> <li><img src="image/4.jpg" alt="" /></li> </ul> <ul class="num"></ul> <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">btn btn_l</span><span style="color: rgba(128, 0, 0, 1)">"</span>>&lt;</div> <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">btn btn_r</span><span style="color: rgba(128, 0, 0, 1)">"</span>>&gt;</div></div>
以下是 CSS 样式表，直接拷贝，可看到效果，只是没有使用 JS 实现轮播事件而已，
<style type="text/css"> *{ padding:0px; margin:0px;list-style:none;} .banner { width:500px; height:300px; margin:100px auto; border:1px solid #808080; position:relative; overflow:hidden;} .banner .img{width:5000px; position:absolute; left:0px;top:0px;} .banner .img img{width:500px; height:300px;} .banner .img li{float:left;} .banner .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px;} .banner .num li { width:10px; height:10px; background-color:#888; border-radius:50%;display:inline-block; margin:0px 3px; cursor:pointer;} .banner .num li.on {background-color: #ff6a00;} .banner .btn {width: 30px;height: 50px;background-color: #808080;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; font-size:40px; color:#fff; font-family:"宋体"; display:none; } .banner .btn_l {left:0px;} .banner .btn_r {right:0px;} .banner:hover .btn {display:block;} </style>
以下是 JS 各个事件的调用，使用前别忘记引用 jquery 文件，我这里引用的是 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">$(document).ready(function () { </span><span style="color: rgba(0, 0, 255, 1)">var</span> i = <span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 0, 255, 1)">var</span> clone = $(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .img li</span><span style="color: rgba(128, 0, 0, 1)">"</span>).first().clone();<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">克隆第一张图片</span> $(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .img</span><span style="color: rgba(128, 0, 0, 1)">"</span>).append(clone);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">复制到列表最后</span> <span style="color: rgba(0, 0, 255, 1)">var</span> size = $(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .img li</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">).size(); </span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> j = <span style="color: rgba(128, 0, 128, 1)">0</span>; j < size-<span style="color: rgba(128, 0, 128, 1)">1</span>; j++<span style="color: rgba(0, 0, 0, 1)">) { $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .num</span><span style="color: rgba(128, 0, 0, 1)">"</span>).append(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)"><li></li></span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">); } $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .num li</span><span style="color: rgba(128, 0, 0, 1)">"</span>).first().addClass(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">on</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">自动轮播</span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 0, 255, 1)">var</span> t = setInterval(function () { i++; move();},<span style="color: rgba(128, 0, 128, 1)">2000</span><span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">鼠标悬停事件</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">).hover(function () { clearInterval(t);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">鼠标悬停时清除定时器</span>}, function () {
t = setInterval(function () {i++; move(); }, 2000); //鼠标移出时清除定时器
});</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">鼠标滑入原点事件</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .num li</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">).hover(function () { </span><span style="color: rgba(0, 0, 255, 1)">var</span> index = $(<span style="color: rgba(0, 0, 255, 1)">this</span>).index();<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取当前索引值</span> i =<span style="color: rgba(0, 0, 0, 1)"> index; $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .img</span><span style="color: rgba(128, 0, 0, 1)">"</span>).stop().animate({ left: -index * <span style="color: rgba(128, 0, 128, 1)">500</span> }, <span style="color: rgba(128, 0, 128, 1)">500</span><span style="color: rgba(0, 0, 0, 1)">); $(</span><span style="color: rgba(0, 0, 255, 1)">this</span>).addClass(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">on</span><span style="color: rgba(128, 0, 0, 1)">"</span>).siblings().removeClass(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">on</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">); }); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">向左按钮</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .btn_l</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">).click(function () { i</span>++<span style="color: rgba(0, 0, 0, 1)">; move(); }) </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">向右按钮</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .btn_r</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">).click(function () { i</span>--<span style="color: rgba(0, 0, 0, 1)">; move(); }) </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">移动事件</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> function move() { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (i ==<span style="color: rgba(0, 0, 0, 1)"> size) { $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .img</span><span style="color: rgba(128, 0, 0, 1)">"</span>).css({ left: <span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)"> }); i </span>= <span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">; } </span><span style="color: rgba(0, 0, 255, 1)">if</span> (i == -<span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">) { $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .img</span><span style="color: rgba(128, 0, 0, 1)">"</span>).css({ left: -(size - <span style="color: rgba(128, 0, 128, 1)">1</span>) * <span style="color: rgba(128, 0, 128, 1)">500</span><span style="color: rgba(0, 0, 0, 1)"> }); i </span>= size - <span style="color: rgba(128, 0, 128, 1)">2</span><span style="color: rgba(0, 0, 0, 1)">; } $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .img</span><span style="color: rgba(128, 0, 0, 1)">"</span>).stop().animate({ left: -i * <span style="color: rgba(128, 0, 128, 1)">500</span> }, <span style="color: rgba(128, 0, 128, 1)">500</span><span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 0, 255, 1)">if</span> (i == size - <span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">) { $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .num li</span><span style="color: rgba(128, 0, 0, 1)">"</span>).eq(<span style="color: rgba(128, 0, 128, 1)">0</span>).addClass(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">on</span><span style="color: rgba(128, 0, 0, 1)">"</span>).siblings().removeClass(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">on</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { $(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.banner .num li</span><span style="color: rgba(128, 0, 0, 1)">"</span>).eq(i).addClass(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">on</span><span style="color: rgba(128, 0, 0, 1)">"</span>).siblings().removeClass(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">on</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">); } } }); </span></script></pre>
拷贝起来很方便即用。