首页 > 代码库 > 再次改版轮播图
再次改版轮播图
<!doctype html><html> <head> <link href=http://www.mamicode.com/"css/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/css.css"/> <script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.7.2.min.js"></script> </head> <style> *{margin:0px; padding:0px;} .flash{width:1200px; height:400px; overflow:hidden;margin: 0 auto;position:relative;color:#fff;} .flash .con li{width:100%; height:400px;position:absolute; left:0px; top:0px;right:0} .flash ul.but{ width:100%; position:absolute;top:325px; left:15%; z-index:222;} .flash ul.but li{width:160px; display:inline-block;float:left;} .flash ul.but li.current{background:url("images/dot.png") 0px 0px;} .flash ul.but li img{width:132px;height: 60px;} </style> <body> <div class="flash" style="border:1px solid #ccc;"> <ul class="con"> <li style="background:url(‘images/1.jpg‘) no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url(‘images/2.jpg‘) no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url(‘images/3.jpg‘) no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url(‘images/4.jpg‘) no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url(‘images/5.jpg‘) no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url(‘images/6.jpg‘) no-repeat 0 0 ;background-size:100%;"></li> </ul> <ul class=‘but‘> <li class="current"><img src=http://www.mamicode.com/"images/1.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src=http://www.mamicode.com/"images/2.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src=http://www.mamicode.com/"images/3.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src=http://www.mamicode.com/"images/4.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src=http://www.mamicode.com/"images/5.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src=http://www.mamicode.com/"images/6.jpg" alt="images/2.jpg" id="2.html" /></li> </ul> <!-- 小图标 --> </div> <script type="text/javascript"> var index = 0; var times; var nowIndex=0; time=setInterval(function times(){ index++; if(index>3){index=0} $(".con li").eq(index).fadeIn().siblings().fadeOut(); $(".but li").eq(index).addClass(‘current‘).siblings().removeClass(‘current‘); },3000); $(‘.but li‘).mouseover(function(){ clearInterval(time); $(this).addClass(‘current‘).siblings().removeClass(‘current‘); $(".con li").eq($(".but li").index($(this))).fadeIn().siblings().fadeOut(); }) $(‘.but li‘).mouseout(function(){ index=-1; time=setInterval(function times(){ index++; if(index>3){ index=0} $(".con li").eq(index).fadeIn().siblings().fadeOut(); $(".but li").eq(index).addClass(‘current‘).siblings().removeClass(‘current‘); },3000); }) </script> </body></html>
再次改版轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。