标签：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>轮播事件JQ</title> </head> <body> <script type="text/javascript" src="jquery-1.11.1.min.js"> </script> <style type="text/css"> ul, li {list-style: none;} .zy_ctrl {width:150px;height:20px;line-height:20px;float:left;position:relative;top:7px;left:20px;} .zy_prev {width:21px;height:19px;float:left;cursor:pointer;background-image:url(/eportal/fileDir/nyj/resource/cms/2013/07/2013072511525539456.gif);} .zy_next {width:21px;height:19px;float:left;cursor:pointer;background-image:url(/eportal/fileDir/nyj/resource/cms/2013/07/next.gif);} .zy_index { width: 108px;height: 20px;float: left;text-align: center;} .zy_index span { display:inline-block; *display:inline;zoom:1; margin-right:8px;margin-top:6px; width: 8px; height: 8px; border-radius: 50%; -moz-border-radius:50%; -webkit-border-radius:50%; background-color: #c3c3c3; border: 1px solid #afafaf; cursor:pointer; } .zy_index span.active { background-color: #f90; border: 1px solid #ff7d00;} .zy_warp { width: 308px;height: 110px;margin:0;padding:0;overflow: hidden;position: relative;} ul.zy_links {width:308px;height:110px;margin:0;padding:0;} ul.zy_links li {width:308px;height:110px;float: left;} </style> <div style="border:1px solid #ccc;margin-top:10px;"> <div style="width:308px;height:34px;line-height:34px;font-size:14px;font-weight:bold;text-indent:12px;background-color:#eaeaea;"> <div style="float:left">这是一个轮播</div> <div class="zy_ctrl"> <div class="zy_prev"></div> <div class="zy_index"> </div> <div class="zy_next"></div> </div> </div> <div class="zy_warp"> <ul class="zy_links"> <li> <img alt="" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017234052524.jpg" style="width: 308px; height: 110px;" /> </li> <li><img alt="" border="0" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017242847400.jpg" style="width: 308px; height: 110px;" /> </li> <li><img alt="" border="0" src="/eportal/fileDir/nyj/resource/cms/2013/08/2013081017245375744.jpg" style="width: 308px; height: 110px;" /> </li> </ul> </div> </div> <script type="text/javascript"> $(document).ready(function(){ var num = $(‘.zy_links‘).find(‘li‘).length; var liWid = $(‘.zy_links li‘).width(); var slideWid = num*liWid; var current = 0; for (var i = 0; i < num; i++) { $(‘.zy_index‘).append(‘<span></span>‘); }; $(‘.zy_index‘).find(‘span‘).eq(0).addClass(‘active‘); $(‘.zy_links‘).width(slideWid); function zySlide () { $(‘.zy_links‘).animate({"marginLeft":-liWid*current}); $(‘.zy_index‘).find(‘span‘).eq(current).addClass(‘active‘).siblings().removeClass(‘active‘); } $(‘.zy_next‘).click(function(){ current++; if (current >= num) { current = 0; }; zySlide(); }); $(‘.zy_prev‘).click(function(){ current--; if (current < 0) { current = num-1; }; zySlide(); }); $(‘.zy_index‘).find(‘span‘).click(function(){ current = $(this).index(); zySlide(); }); setInterval(autoSlide,6000); function autoSlide(){ current++; if (current >= num) { current = 0; }; zySlide(); } }); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/yjhua/p/4623542.html
