jquery轮播图效果
coder_wb 人气:0本文使用jquery实现轮播图效果,供大家参考,具体内容如下
首先上效果
上代码
html
<div id="main"> <div class="pic"> <ul> <li style="background: url(img/bg1.jpg);"> <img class="img1" src="img/text1.png" /> <img class="img2" src="img/con1.png" /> </li> <li style="background: url(img/bg2.jpg);"> <img class="img1" src="img/text2.png" /> <img class="img2" src="img/con2.png" /> </li> <li style="background: url(img/bg3.jpg);"> <img class="img1" src="img/text3.png" /> <img class="img2" src="img/con3.png" /> </li> <li style="background: url(img/bg4.jpg);"> <img class="img1" src="img/text4.png" /> <img class="img2" src="img/con4.png" /> </li> <li style="background: url(img/bg5.jpg);"> <img class="img1" src="img/text5.png" /> <img class="img2" src="img/con5.png" /> </li> </ul> </div> <div class="nav"> <ul> <li class="select"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div style="width: 100px; height: 100px; background: red; display: none;"></div>
css代码
<style type="text/css"> * { margin: 0; padding: 0; } ul li { list-style: none; } #main { width: 760px; height: 300px; position: relative; margin: 50px auto; } #main .pic { width: 760px; height: 300px; overflow: hidden; } #main .pic ul li { width: 760px; height: 300px; position: relative; } #main .pic ul li .img1 { position: absolute; top: 0; left: -760px; } #main .pic ul li .img2 { position: absolute; top: 0; left: -20px; display: none; } #main .nav { position: absolute; right: 20px; bottom: 20px; } #main .nav ul li { width: 10px; height: 10px; border: 1px solid #fff; float: left; margin-left: 5px; } #main .nav ul li.select { background: #fff; }
js代码
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $(".pic li") .eq(0) .find(".img1") .stop() .animate({ left: 0 }, 800) .next() .stop() .show() .animate({ left: 0 }, 800); var i = 0; setInterval(function () { i++; if (i == $(".pic li").length) { i = 0; } $(".pic li") .eq(i) .fadeIn() .find(".img1") .stop() .animate({ left: 0 }, 800) .next() .stop() .show() .animate({ left: 0 }, 800) .end() .end() .siblings() .fadeOut() .find(".img1") .css({ left: "-760px" }) .next() .hide() .css({ left: "-20px" }); $(".nav li") .eq(i) .addClass("select") .siblings() .removeClass("select"); }, 2000); }); </script>
加载全部内容