轮播图例子

 编写一个京东网站轮播图效果

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         ul{
 12             list-style-type: none;
 13         }
 14         .outer{
 15             margin: 50px auto;
 16             width: 590px;
 17             height: 470px;
 18             position: relative;
 19         }
 20         .img li{
 21             position: absolute;
 22             top: 0px;
 23             left: 0px;
 24         }
 25 
 26         .num {
 27             position: absolute;
 28             bottom: 20px;
 29             text-align: center;
 30             width: 100%;
 31 
 32         }
 33         .num li{
 34             display: inline-block;
 35             height: 20px;
 36             width: 20px;
 37             color:white;
 38             background-color: gray;
 39             text-align: center;
 40             border-radius: 50%;
 41             margin: 0 10px;
 42         }
 43         .btn{
 44             position: absolute;
 45             height: 60px;
 46             width: 30px;
 47             background-color: darkgrey;
 48             color:white;
 49             text-align: center;
 50             line-height: 60px;
 51             top:50%;
 52             margin-top: -30px;
 53             display: none;
 54         }
 55         .left_btn{
 56             left: 0px;
 57 
 58         }
 59         .right_btn{
 60             right: 0px;
 61         }
 62         .outer:hover .btn{
 63             display: block;
 64         }
 65         .current{
 66             background-color: white !important;
 67             color:black !important;
 68         }
 69         .btn:hover{
 70             background-color: red;
 71         }
 72     </style>
 73 </head>
 74 <body>
 75     <div class="outer">
 76         <ul class="img">
 77             <li><a><img  src="img/123.jpg"/> </a></li>
 78             <li><a><img  src="img/124.jpg"/> </a></li>
 79             <li><a><img  src="img/125.jpg"/> </a></li>
 80             <li><a><img  src="img/126.jpg"/> </a></li>
 81         </ul>
 82         <ul class="num">
 83             <li class="current">1</li>
 84             <li>2</li>
 85             <li>3</li>
 86             <li>4</li>
 87         </ul>
 88         <div class="left_btn btn"> < </div>
 89         <div class="right_btn btn">  > </div>
 90     </div>
 91 <script src="jquery-3.3.1.min.js"></script>
 92 <script>
 93     var i=0;
 94     $(".num li").mouseover(function () {
 95         $(this).addClass("current").siblings().removeClass("current")
 96         var index=$(this).index()
 97         i=index
 98         $(".img  li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
 99     })
100 
101     var time=setInterval(move,1500);
102 
103     function move() {
104         if (i>=3){
105             i=-1
106         }
107         i++;
108         $(".num li").eq(i).addClass("current").siblings().removeClass("current")
109         $(".img  li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
110     }
111     $(".outer").hover(function () {
112         clearInterval(time)
113     },function () {
114         time=setInterval(move,1500)
115     })
116     $(".right_btn").click(function () {
117         move()
118     })
119     $(".left_btn").click(function () {
120         if(i<=0){
121             i=4
122         }
123         i=i-2;
124         move()
125     })
126 
127 </script>
128 </body>
129 </html>

 

posted @ 2018-09-24 18:18  巨兽~墨菲特  阅读(132)  评论(0)  编辑  收藏  举报