<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.3.min.js"></script> </head> <style> *{ margin: 0; padding: 0; } #box{ width: 700px; height: 400px; border: 1px solid #102327; position: relative; margin:0 auto; margin-top: 100px; overflow: hidden; } .ul_list{ width:3500px; height: 400px; position: absolute; } .li_list{ width: 700px; height: 400px; list-style: none; float: left; } .li_list img{ width: 100%; height: 100%; } .odiv_nav{ position: absolute; bottom: 20px; left: 50%; margin-left: -100px; } .span_list{ width: 20px; height: 20px; border: 3px solid white; border-radius:50%; float: left; margin-left: 20px; cursor: pointer; } .left_click{ position: absolute; width: 80px; height: 400px; font-size:4em; color: white; text-align: center; line-height: 400px; cursor: pointer; z-10000; } .right_click{ position: absolute; right: 0px; width: 80px; height: 400px; font-size:4em; color: white; text-align: center; line-height: 400px; cursor: pointer; z-10000; } .btn_left{ position: absolute; left: -40px; width: 40px; height: 400px; opacity: 0.5; z-index: 9999; box-shadow:40px 0px 150px white; transition: all 0.2s; } .btn_right{ position: absolute; right: -40px; width: 40px; height: 400px; font-size: 4em; box-shadow:-40px 0px 150px white; opacity: 0.5; z-index: 9999; transition: all 0.2s; } </style> <body> <div id="box"> <ul class="ul_list"> <li class="li_list"><img src="images/bookA.jpg" alt=""/></li> <li class="li_list"><img src="images/bookB.jpg" alt=""/></li> <li class="li_list"><img src="images/bookA.jpg" alt=""/></li> <li class="li_list"><img src="images/bookB.jpg" alt=""/></li> <li class="li_list"><img src="images/bookA.jpg" alt=""/></li> </ul> <div class="odiv_nav"> <span class="span_list"></span> <span class="span_list"></span> <span class="span_list"></span> <span class="span_list"></span> </div> <div class="left_click"><</div> <div class="right_click">></div> <div class="btn_left"></div> <div class="btn_right"></div> </div> <script> $(function(){ var num=0; var timer=null; go(); $("#box").mouseenter(function(){//實現當鼠標移動到box上時，不執行自動輪播功能 clearInterval(timer);//移動進去時清除定時器 }).mouseleave(function(){ go();//移出後執行go函數 }); $(".span_list").eq(0).css("backgroundColor","white"); //頁面加載後默認是第一張圖，則讓第一個導航圓點變爲“選中色”。 function go(){ timer=setInterval(function(){//設置定時器 num++;//用一個全局變量來控制圖的運動次數 if(num>4){//如果移動到了最後一張圖，則num賦值1，調整ul邊距（相當於初始化） num=1; $(".ul_list").css("margin-left","0px"); } if(num==4){//由於圓點只有四個，而圖片有五張，當移動到第五張圖片時，給第一個圓點“選中色”。 $(".span_list").css("backgroundColor","transparent"); $(".span_list").eq(0).css("backgroundColor","white"); } else{//圖片運動一次，導航圓點也動態的變換，這裏先讓所有圓點變爲“不選中色”，再讓當前圓點變爲“選中色”。 $(".span_list").css("backgroundColor","transparent"); $(".span_list").eq(num).css("backgroundColor","white"); } $(".ul_list").animate({"marginLeft":-700*num+"px"},580);//使用animate實行運動功能 },2000); } $(".span_list").each(function (index) {//遍歷每一個圓點添加點擊事件，點擊當前圓點則讓num值賦爲當前圓點的索引 $(this).click(function () { num=index; $(".span_list").css("backgroundColor","transparent"); $(".span_list").eq(num).css("backgroundColor","white"); $(".ul_list").stop().animate({"marginLeft":-700*num+"px"},580); }) }); $(".right_click").click(function(){ //右按鈕點擊事件，每點擊一次num++,這裏有很多的判斷，是用來消除一些BUG的。 if(num<=4){num++;} if(num>4){ num=1; $(".ul_list").css("margin-left","0px"); } if(num==4){ $(".span_list").css("backgroundColor","transparent"); $(".span_list").eq(0).css("backgroundColor","white"); } else{ $(".span_list").css("backgroundColor","transparent"); $(".span_list").eq(num).css("backgroundColor","white"); } $(".ul_list").stop().animate({"marginLeft":-700*num+"px"},580); }); $(".left_click").click(function(){//左按鈕點擊事件 if(num>=0){num--;} if(num<0){ num=3; $(".ul_list").css("margin-left","-2800px") $(".span_list").css("backgroundColor","transparent"); $(".span_list").eq(3).css("backgroundColor","white"); } else{ $(".span_list").css("backgroundColor","transparent"); $(".span_list").eq(num).css("backgroundColor","white"); } $(".ul_list").stop().animate({"marginLeft":-700*num+"px"},580); }); $(".left_click").hover(function(){//這裏是實現左右按鈕的陰影效果顯示，用到了hover事件 $(".btn_left").css("opacity","1"); },function(){ $(".btn_left").css("opacity","0.5"); }); $(".right_click").hover(function(){ $(".btn_right").css("opacity","1"); },function(){ $(".btn_right").css("opacity","0.5"); }); }); </script> </body> </html>
用jquery實現圖片輪播
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.