简单实现jQuery轮播效果

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

本文实例为大家分享了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;
 /*overflow: hidden;*/
 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>

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