用jquery实现带左右按键的轮播图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery实现带左右按键的轮播图相关的知识，希望对你有一定的参考价值。
成品如下：
简单来说就是点击“右”按钮时，转换到右边的下一幅图片，同时上面的小方块颜色也跟着改变，如果已经是最后一幅图片，再点击“右”，则转换到第一幅图片，是直接向左移找到第一幅图的，明天再做一下无缝切换的效果，即最后一幅图放完了以后第一幅图从右滑进来跟上。点击“左”同理。
下面是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实现带左右按键的轮播图的主要内容，如果未能解决你的问题，请参考以下文章