标签：
本代码实现的是横向循环滚动，
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery的焦点图（幻灯片）</title> <script src="http://libs.useso.com/js/jquery/1.11.1-rc2/jquery.min.js"></script> <style type="text/css"> /*
引样式写法不支持IE8.0以下，可以简单修改下。不使用“>”即可。
*/
.slide { width: 510px; height: 260px; overflow: hidden; position: relative; } .slide>div { position: absolute; left: 0; top: 0; z-index: 5; } .slide>div>a { display: inline-block; float: left; width: 510px; height: 260px; overflow: hidden; } .slide>ul { width: 76px; margin: 0 auto; position: absolute; z-index: 6; left: 20px; bottom: 16px; } .slide>ul>li { width: 13px; height: 13px; overflow: hidden; background: url(../images/index.png) no-repeat -350px -85px; float: left; display: inline; margin: 0 3px; cursor: pointer; } .slide>ul>li.on { background-position: -370px -85px; } </style> </head> <body> <div class="slide" id="slide"> <div class="clearfix">
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/99189163731504.jpg" width="510" height="260"></a>
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/86068444730745.jpg" width="510" height="260"></a>
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/79618951727105.jpg" width="510" height="260"></a>
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/85264284696628.jpg" width="510" height="260"></a>
<a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/55074145695986.jpg" width="510" height="260"></a> </div> <ul class="clearfix"> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div> <script type="text/javascript" charset="utf-8"> $(function($){ //幻灯片 var len = $("#slide>div>a").length, strbtn = ‘‘, index = 0, picTimer; $("#slide>div").width(len*510); //按钮居中 $("#slide>ul").css({‘width‘:len*19+‘px‘,‘left‘:(510-(len*19))/2+‘px‘}); //按钮绑定事件 $("#slide>ul>li").mouseover(function() { index = $("#slide>ul>li").index(this); setSlide(index); }).eq(0).trigger("mouseover"); //鼠标移入停止 $("#slide").hover( function(){ clearInterval(picTimer); }, function(){ picTimer = setInterval(function(){ setSlide(index); index++; if(index == len) {index = 0;} },4000); } ).trigger("mouseleave"); }); function setSlide(index){ $("#slide>div").stop(true,false).animate({left: ‘-‘+ index*510 +‘px‘}, "slow"); $("#slide>ul>li").removeClass(‘on‘).eq(index).addClass(‘on‘); } </script> </body> </html>
2015.3.3以此为基础修改渐变样式。
标签：
原文地址：http://www.cnblogs.com/li0566/p/li2566.html
