使用HTML+css实现京东图片自动轮播效果(自己写的)

来源：互联网发布：arm linux发行版编辑：程序博客网时间：2024/06/05 03:38
<!doctype html> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>jQuery图片轮换效果</title>  <style type="text/css">  *{margin:0px;padding:0px;text-align:center;  }  #banner{width:730px;height:454px;margin:50px auto;position:relative;/*相对定位,相对于.btn按钮*/text-align:left;  }  .pic image {display:block;/*默认有图片不显示*/position:absolute;/*绝对定位.对应的是.pic这个div*/top:0px;left:0px;  }  .pic a{display:none;  }  .pic{        /*专门显现图片区*/position:relative;/*相对定位.对应.pic img*/border:1px solid red;  }  .btn{width:150px;height:18px;position:absolute;/*绝对定位相对于banner div*/bottom:5px;right:290px;  }  .btn ul li{background-color:#000000;/*黑色*/color:#ffffff;list-style-type:none;width:18px;height:18px;float:left;border-radius:9px;/*变成圆的*/text-align:center;line-height:18px;cursor:pointer;/*鼠标移动变手指状态*/margin-left:5px;  }.btn ul li.one{   background-color:#ff9966;  }  </style>  <script src="jquery-3.0.0.min.js"></script>  <script>$(function(){$("#all li").mouseover(function(){//鼠标进入离开事件$(this).css("background-color","#ff00ff").siblings().css("background-color","white");$(this).css({"background-color":"red","font-size":"9px"}).siblings().hide();});$(window).scroll(function(){//鼠标滚动事件var _top=$(window).scrollTop();//获得鼠标滚动的距离});//手动播放图片$(".btn ul li").hover(function(){$(this).addClass("one").siblings().removeClass("one");index=$(this).index();i=index;    $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();  });//自动播放图片var i=0;var t=setInterval(autoplay,1000);function autoplay(){i++;if(i>5)i=0;$(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");$(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide(); }$("#banner").hover(function(){clearInterval(t);},function(){t=setInterval(autoplay,1000);});});  </script> </head> <body><!--<ul id="all"><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li><li>第六个</li><li>第七个</li></ul>--><!--<div style="width:600px;height:900px;background-color:#ffcc66">ttt</div>--><div id="banner"><div class="pic"><a href="#" style="display:block"><img src="image/1.jpg"/></a><a href="#"><img src="image/2.png"/></a><a href="#"><img src="image/3.jpg"/></a><a href="#"><img src="image/4.jpg"/></a><a href="#"><img src="image/5.jpg"/></a><a href="#"><img src="image/6.jpg"/></a></div><div class="btn"><ul><li class="one">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><div></div> </body></html>
0 0