用jquery實現帶左右按鍵的輪播圖
阿新 • • 發佈：2017-08-04
round 500px asc pub video 記錄 找到 blog span
成品如下：
簡單來說就是點擊“右”按鈕時，轉換到右邊的下一幅圖片，同時上面的小方塊顏色也跟著改變，如果已經是最後一幅圖片，再點擊“右”，則轉換到第一幅圖片，是直接向左移找到第一幅圖的，明天再做一下無縫切換的效果，即最後一幅圖放完了以後第一幅圖從右滑進來跟上。點擊“左”同理。
下面是html代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="test_ch4.css" id="herf" /> <script type="text/javascript" src="jquery-3.2.1.js"></script> <title>test_ch4</title> <meta charset="utf-8"/> </head> <body> <div id="wrap"> <div id="head" > <div id="head_l"> <div id="head_l_w"> <span class="white blue" ></span> <span class="white"></span> <span class="white"></span> <span class="white"></span> </div> <span id="left">左</span><span id="right">右</span> </div> </div> <div id="video"> <div id="inner"> <ul> <li><a href=""> <img src="01.jpg" alt="" /></a> <p>海賊王</p> <span>播放：28,276</span></li> <li><a href=""> <img src="01.jpg" alt="" /></a> <p>海賊王</p> <span>播放：28,276</span></li> <li><a href=""> <img src="01.jpg" alt="" /></a> <p>海賊王</p> <span>播放：28,276</span></li> <li><a href=""> <img src="01.jpg" alt="" /></a> <p>海賊王</p> <span>播放：28,276</span></li> <li><a href=""> <img src="02.jpg" alt="" /></a> <p>哆啦A夢</p> <span>播放：33,326</span></li> <li><a href=""> <img src="02.jpg" alt="" /></a> <p>哆啦A夢</p> <span>播放：33,326</span></li> <li><a href=""> <img src="02.jpg" alt="" /></a> <p>哆啦A夢</p> <span>播放：33,326</span></li> <li><a href=""> <img src="02.jpg" alt="" /></a> <p>哆啦A夢</p> <span>播放：33,326</span></li> <li><a href=""> <img src="03.jpg" alt="" /></a> <p>火影忍者</p> <span>播放：28,276</span></li> <li><a href=""> <img src="03.jpg" alt="" /></a> <p>火影忍者</p> <span>播放：28,276</span></li> <li><a href=""> <img src="03.jpg" alt="" /></a> <p>火影忍者</p> <span>播放：28,276</span></li> <li><a href=""> <img src="03.jpg" alt="" /></a> <p>火影忍者</p> <span>播放：28,276</span></li> <li><a href=""> <img src="04.jpg" alt="" /></a> <p>龍珠</p> <span>播放：33,326</span></li> <li><a href=""> <img src="04.jpg" alt="" /></a> <p>龍珠</p> <span>播放：33,326</span></li> <li><a href=""> <img src="04.jpg" alt="" /></a> <p>龍珠</p> <span>播放：33,326</span></li> <li><a href=""> <img src="04.jpg" alt="" /></a> <p>龍珠</p> <span>播放：33,326</span></li> </ul> </div> </div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ var page = 1; var v_width = $("#video").width() + 20; $("#right").click(function(e){ if(!$("#video").is(":animated")){ if(page % 4 == 0) { $("#video").animate({left:"0px"},1000); page = 1; } else { $("#video").animate({left:‘-=‘+v_width},1000); page++; } } $("#head_l_w span").attr("class","white"); $("span.white").eq(page%4-1).attr("class","blue"); }); $("#left").click(function(){ if(!$("#video").is(":animated")){ if(page % 4 == 1) { $("#video").animate({left:‘-=‘+v_width*3},1000); page = 4; } else { $("#video").animate({left:‘+=‘+v_width},1000); page--; } $("#head_l_w span").attr("class","white"); $("span.white").eq(page%4-1).attr("class","blue"); } }); }); </script> </html>
css代碼：
ul {list-style:none; padding: 0;} ul li { display:inline-block; margin: 10px 2px 0; padding: 8px; } ul li a { display: block; height: 80px; width: 128px; } ul li img{ height: 80px; width: 128px; } a { text-decoration:none;} p{ color: blue; font-size: 12px; margin: 0; padding:0; } span { font-size: 12px; color: gray; } #wrap { width: 595px; overflow: hidden; border: 1px solid gray; } #video { position: relative; left: 0px; height: 160px; width: 592px; } #inner { width: 2500px; height: 170px; margin-bottom: 10px; } #head { background: #fff; } #head_l span { display: inline-block; } #right,#left{ color: black; font-size: 14px; margin-right: 20px; cursor: pointer; } .white { width: 5px; height: 5px; background-color: white; margin-right:10px; border: 1px solid gray; } .blue{ width: 5px; height: 5px; background-color: blue; margin-right:10px; border: 1px solid gray; }
在程序中，用page來記錄是第幾屏在展示，然後選擇相應的小方塊讓它變藍，並且計算為了移到下一屏應該怎樣進行相對定位。在布局裏還有一個小技巧，就是包裹內容區的div要比外層div長，這樣內容（總共4屏）在裏層排成一排，但外層只能顯示出1屏。
用jquery實現帶左右按鍵的輪播圖