本文实例为大家分享了jQuery轮播效果展示的具体代码，供大家参考，具体内容如下

jQ代码：

在写jQuery代码之前一定要先导库，此处我用的是3.0的库

<script src="jquery-3.0.0.js"></script> <script type="text/javascript"> var timer; $(function() { //设置图片向左移 imgshow(); //点击暂停按钮事件 $(".pause").click(function () { clearInterval(timer); }); //点击播放按钮事件 $(".play").click(function () { imgshow(); }); //点击左按钮 $(".prev").click(function () { imganimation("left"); }); //点击右按钮 $(".next").click(function () { imganimation("right"); }); function imganimation(res) { //图片向左走的轮播 if(res=="right"){ //animate()动画第一个li向左移动20% $(".lilist:first").animate({ "marginLeft": "-20%" }, 700, "linear", function () { //这个li回到原来的位置 $(this).css("marginLeft", "0px"); //将它追加到ul的最后的位置 $(this).appendTo($(".ullist")); }); //设置小框的图片轮播，原理与大框图片轮播一致 $(".s_lilist:first").animate({ "marginLeft": "-20%" }, 650, "linear", function () { $(this).css("marginLeft", "0px"); $(this).appendTo($(".s_ullist")); }); }else { //图片向右走，与向左的原理相同 $(".lilist:first").animate({ "marginLeft": "20%" }, 700, "linear", function () { $(this).css("marginLeft", "0px"); $(".lilist:last").prependTo($(".ullist")); }); $(".s_lilist:first").animate({ "marginLeft": "20%" }, 650, "linear", function () { $(this).css("marginLeft", "0px"); $(".s_lilist:last").prependTo($(".s_ullist")); }); }; }; //默认图片自动向左走 function imgshow() { timer = setInterval(function (){ imganimation("right"); } , 2000); }; }); </script>

css样式：

* { margin: 0; padding: 0; } .divbg { width: 100%; height: 350px; position: relative; } .mb { width: 30%; height: 350px; background: rgba(0, 0, 0, 0.3); position: absolute; } .mb:first-child { left: 0px; } .mb:nth-child(2) { right: 0px; } .ullist { width: 200%; height: 350px; margin-left: -50%; } .lilist { width: 20%; height: 350px; list-style: none; float: left; } .imglist { width: 100%; height: 100%; } .divblock{ width: 20%; height: 70%; border: 4px solid rgba(255, 255, 255, 0.32); position: absolute; z-index: 5; left: 46%; top: 15%; overflow: hidden; } .s_mb{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; z-index: 10; } .s_ullist{ width: 500%; height: 100%; margin-left: -200%; } .s_lilist{ width: 20%; height: 100%; list-style: none; float: left; } .s_imglist{ height: 100%; width: 100%; } .s_mb img{ margin-left: 16%; margin-top: 65%; cursor: pointer; }

html样式：

<div class="divbg"> <div class="divblock"> <div class="s_mb"> <img class="prev" src="./img2/btn_prev.png" /> <img class="pause" src="./img2/btn_pause.png" /> <img class="play" src="./img2/btn_play.png" /> <img class="next" src="./img2/btn_next.png" /> </div> <ul class="s_ullist"> <li class="s_lilist"> <img class="s_imglist" src="img2/2121.jpg" /> </li> <li class="s_lilist"> <img class="s_imglist" src="img2/2122.jpg" /> </li> <li class="s_lilist"> <img class="s_imglist" src="img2/2123.jpg" /> </li> <li class="s_lilist"> <img class="s_imglist" src="img2/2124.jpg" /> </li> <li class="s_lilist"> <img class="s_imglist" src="img2/2123.jpg" /> </li> </ul> </div> <div class="mb"></div> <div class="mb"></div> <ul class="ullist"> <li class="lilist"> <img class="imglist" src="img2/2121.jpg" /> </li> <li class="lilist"> <img class="imglist" src="img2/2122.jpg" /> </li> <li class="lilist"> <img class="imglist" src="img2/2123.jpg" /> </li> <li class="lilist"> <img class="imglist" src="img2/2124.jpg" /> </li> <li class="lilist"> <img class="imglist" src="img2/2123.jpg" /> </li> </ul> </div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。