<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="fk.css" rel="stylesheet" type="text/css" /> <script src="../1.10.2.jquery.min.js"></script> </head> <body> <div id="flash"> <!--img[src=img/$.jpg]*6--> <div class="pic_box"> <img src="img/1.jpg" alt="" /> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img/4.jpg" alt="" /> <img src="img/1.jpg" alt="" /> </div> <ul> <li class="cur"></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script> var c=0; setInterval(function(){ c++; if(c==5){ $("#flash .pic_box").css('left','0'); c=1; } // 计算大块的left值 var l=c*-473; // 让大块移动到对应的left值上 $("#flash .pic_box").animate({'left':l},300); if(c==4){ $("#flash ul li").eq(0).css('background','#7abd54').siblings('li').css('background','#999'); } // 让c号li变绿,兄弟li变灰 $("#flash ul li").eq(c).css('background','#7abd54').siblings('li').css('background','#999'); },1000); </script> </html>
css代码
*{ margin: 0; padding: 0; } #flash{ width: 473px; height: 180px; border: 5px solid blue; margin: 20px auto; position: relative; overflow: hidden; } #flash .pic_box{ width: 2365px; height: 190px; position: absolute; left: 0; top: 0; } #flash .pic_box img{ float: left; width: 473px; height: 180px; } #flash ul li{ list-style: none; width: 36px; height: 5px; background: #999; float: left; margin-right: 2px; } #flash ul{ position: absolute; left: 161px; top: 169px; } #flash ul li.cur{ background: #7abd54; }
来源:https://www.cnblogs.com/gxywb/p/9413897.html