标签：
以前图片轮播经常用网上的插件，然后想说自己也要认真看看，一步一步弄明白，所以就自己研究写了个图片轮播的代码，我自己觉得还算是挺简单的。如有改进的地方，欢迎你能帮我指出，共同进步。
（ps：博客园如何上传代码就是可以供大家下载那种，一直没找到地方！）
html：
<html>
<body> <div class="main"> <div class="myslide"> <ul class="myslidetwo"> <li><img src="img/dn.jpg"/></li> <li> <img src="img/ey.jpg"/></li> <li><img src="img/fxh.jpg"/></li> <li><img src="img/ss.jpg"/></li> </ul> <p class="arrows"> <a class="pre"><</a> <a class="next">></a> </p> <ol class="label"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div> </div> </body>
</html>
css：
<style> body { background-color: #dddddd; } * { margin: 0px; padding: 0px;list-style: none; } a{ cursor: pointer; } .main { position: relative; width: 500px; height: 350px;margin:40px auto; } .myslide { float: left; position: absolute; overflow: hidden; width: 500px; height: 350px; } .myslidetwo { position: absolute; overflow: hidden; width: 2000px; } .myslidetwo img { float: left; width: 500px; height: 350px; } .label{ position: absolute; bottom: 15px; left: 210px; width: 200px; } .label li { float: left; width:20px;height:20px;line-height:20px;text-align: center; margin-right: 5px; border:1px solid #ddd; font-size: 14px; background: #fff; cursor: pointer; } .label li.current { background: #0f0; } .arrows{ position: absolute; left:0px; top:120px; color:#666; font-size: 40px;font-weight: bold; } .arrows a{ background: rgba(0,0,0,0.2); display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px; } .arrows a:hover{ color:#fff; } .arrows .pre{ margin-right: 420px; } </style>
jquey：
<script> $(document).ready(function () { var _now=0; var oul = $(".myslidetwo"); var numl = $(".label li"); var wid = $(".myslide").eq(0).width(); //数字图标实现 numl.click(function () { var index = $(this).index(); $(this).addClass("current").siblings().removeClass(); oul.animate({‘left‘: -wid * index}, 500); }) //左右箭头轮播 $(".pre").click(function () { if (_now>=1) _now--; else _now=3; ani(); }); $(".next").click(function () { if (_now == numl.size() - 1) { _now = 0; } else _now++; ani(); }); //动画函数 function ani(){ numl.eq(_now).addClass("current").siblings().removeClass(); oul.animate({‘left‘: -wid * _now}, 500); } //以下代码如果不需要自动轮播可删除 //自动动画 var _interval=setInterval(showTime,2000); function showTime() { if (_now == numl.size() - 1) { _now = 0; } else _now++; ani(); } //鼠标停留在画面时停止自动动画，离开恢复 $(".myslide").mouseover(function(){ clearTimeout(_interval); }); $(".myslide").mouseout(function(){ _interval=setInterval(showTime,2000); }); }); </script>
标签：
原文地址：http://www.cnblogs.com/zaoansijia/p/4513897.html
