首页 > 代码库 > 自己写的简单的轮播图
自己写的简单的轮播图
代码部分：
<!DOCTYPE html><html> <head> <style type="text/css"> *{margin:0px; padding:0px;} .flash{width:100%; height:400px; overflow:hidden; position:relative;color:#fff;} .flash ul.con li{list-style-type:none;width:100%; height:400px; position:absolute; left:0px; top:0px;} .flash ul.but{ width:200px; position:absolute;top:350px; left:45%; z-index:222;} .flash ul.but li{width:13px; height:13px; display:inline-block;float:left;background:url("images/dot.png") -13px 0px; margin:0 5px;} .flash ul.but li.current{background:url("images/dot.png") 0px 0px;}</style> </head><body><div class="flash"> <ul class="con"> <li style="background:url(‘images/img1.jpg‘) center;">0</li> <li style="background:url(‘images/img2.jpg‘) center">1</li> <li style="background:url(‘images/img3.jpg‘) center">2</li> <li style="background:url(‘images/img4.jpg‘) center">3</li> </ul><!-- <ul class=‘but‘> <li class="current"></li> <li></li> <li></li> <li></li> </ul> --> <!-- 小图标 --> </div><script src=http://www.mamicode.com/"http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script> //没有图标版 $(function(){ index=-1; Time = setInterval(function(){ index++; if(index==3){ index=-1; } $(‘.con li‘).eq(index).fadeIn(1000).siblings().fadeOut(1000); },3000); })</script><!--小图标版<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个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。