圖片的輪播效果實現
2.讓圖片動起來
3.實現圖片的淡入淡出
4.產生小圓點
5.小圓點動起來
6.鼠標懸停效果
7.側欄效果
代碼：<!DOCTYPE html><head> <meta charset="UTF-8"> <title>練習</title> <script src="js/jquery-3.2.1 (1).js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> <style type="text/css"> *{border: none; margin: 0px auto; padding: 0px auto;} body{text-align: center;} .main{width: 790px; height: 340px; background-color: bisque; margin-top: 20px; position: relative;} .show_img{width: 100%; height: 100%; background-color: blue;} .show_button{position: absolute; bottom: 30px; left: 300px; width: 192px; height: 20px; background-color: brown; border-radius: 10px;} .show_button_left{ height: 60px; width: 30px; background-color: white; position: absolute; left: 0px; top: 130px; opacity: .2; line-height:60px ; } .show_button_left:hover{opacity: .8;} .show_button_right{ height: 60px; width: 30px; background-color: white; position: absolute; right: 0px; top: 130px; opacity: .2; line-height:60px ; } .show_button_right:hover{opacity: .8;} #my_img1{position: absolute; left: 0px; top: 0px;} #my_img2{position: absolute; left: 0px; top: 0px; } .show_button span{width: 10px; height: 10px; border-radius: 10px; background-color: white; margin-left: 10px; display: block; float: left; cursor: pointer; margin-top: 6px; } .show_button span:hover{background-color: red;} .show_button_span_hover{background-color: red;} </style> <body> <div class="main"> <div class="show_img"> <img id="my_img1" src="img/1.jpg" /> <img id="my_img2" src="img/2.jpg" style="display: none;" /> </div> <div class="show_button"> </div> <div class="show_button_left"> < </div> <div class="show_button_right"> > </div> </div> <script type="text/javascript"> var i=8002; var arr=new Array( 'img/1.jpg','img/2.jpg','img/3.jpg', 'img/4.jpg','img/5.jpg','img/6.jpg', 'img/1.jpg','img/2.jpg','img/3.jpg'); //創建圓點 function make_ra(){ var make_th="<span> </span>" for(j=1;j<arr.length;j++){ make_th+="<span> </span>" } $(".show_button").html(make_th); } make_ra(); function test(){ var j=i%arr.length; //切換之前 $("#my_img1").attr("src",$("#my_img2").attr("src")); $("#my_img2").attr("src",arr[j]); //這兩張圖片一個是漸入一個是漸出 $("#my_img1").show().fadeOut(2000); $("#my_img2").hide().fadeIn(2000); $(".show_button span").css('background-color','white'); $(".show_button span").eq(j).css('background-color','red'); i++; } var s= setInterval("test()",3000); //鼠標懸停，圖片不動 $(".show_button,show_img,.show_button_left,.show_button_right").hover(function(){ clearInterval(s); },function(){ s=setInterval("test()",3000); }) //實現圓點的點擊事件 $(".show_button span").click(function(){ var index=$(this).index(); console.log(index); $("#my_img1").attr("src",$("#my_img2").attr("src")); $("#my_img2").attr("src",arr[index]); $("#my_img1").show().fadeOut(2000); $("#my_img2").hide().fadeIn(2000); }) //實現側欄點擊事件 $(".show_button_right").click(function(){ test(); }) $(".show_button_left").click(function(){ var j=i%arr.length; //切換之前 $("#my_img1").attr("src",$("#my_img2").attr("src")); $("#my_img2").attr("src",arr[j]); //這兩張圖片一個是漸入一個是漸出 $("#my_img1").show().fadeOut(2000); $("#my_img2").hide().fadeIn(2000); $(".show_button span").css('background-color','white'); $(".show_button span").eq(j).css('background-color','red'); i--; }) </script> </body>
