编写一个京东网站轮播图效果
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>