最熟悉的轮播图插件,近期时间每天一轮~
index.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
*{margin: 0;padding: 0;} #wrap{ width: 300px; height: 200px; position: relative; overflow: hidden; } #wrap li{ list-style: none; height: 200px; } #wrap .imgWrap{ display: flex; flex-direction: row; position: absolute; left: 0; top: 0; transition: all .8s ease; } #wrap .numWrap{ display: flex; flex-direction: row; position: absolute; left: 50%; bottom: 10px; margin-left: -40px; } #wrap .numWrap li{ width: 10px; height: 10px; background: white; border-radius: 5px; margin:0 10px; cursor: pointer; } #wrap .numWrap .one{ /*准备的样式*/ background: hotpink; } #wrap .left,.right{ cursor: pointer; width: 15px; height: 20px; background: red; position: absolute; display: none; top: 40%; } #wrap .left{ left: 10px; } #wrap .right{ right: 10px; } #wrap:hover .left{ display: block; } #wrap:hover .right{ display: block; } |
index.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<link rel="stylesheet" type="text/css" href="index.css"/> <div id="wrap"> <!--图片容器url--> <ul class="imgWrap"> <li class="first"><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> </ul> <!--按钮容器--> <ol class="numWrap"> <li class="one"></li> <li></li> <li></li> </ol> <!--左右按钮--> <div class="left"></div> <div class="right"></div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jQuery.banner.js"></script> <script> $("#wrap").tab({ wrap:"#wrap", imgWrap:".imgWrap", imgWrapLi:".imgWrap>li", numWrapLi:".numWrap>li", numWrap:".numWrap", left:".left", right:".right" }); </script> |
jQuery.banner.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
//函数整理如下 ; (function($) { //封装成函数 $.fn.tab=function(config){ var index = 0; var def={ wrap:"#wrap", imgWrap:".imgWrap", imgWrapLi:".imgWrap>li", numWrapLi:".numWrap>li", numWrap:".numWrap", left:".left", right:".right" } var setting = $.extend({}, def, config); //按钮点击 $(setting.numWrapLi).on("click", function() { index = $(this).index(); next(); }) $(setting.left).on("click", function() { index--; next(); }) $(setting.right).on("click", function() { index++; next(); }) //动画封装,可以直接调用 function next() { if(index == $(setting.imgWrapLi).length) { index = 0 }else if(index==-1){ index = $(setting.numWrapLi).length - 1; } //循环清空 $(setting.numWrapLi).removeClass("one"); //只给点击按钮添加class $(setting.numWrapLi).eq(index).addClass("one"); //点击按钮,显示对应图片 $(setting.imgWrap).css("left", -($(setting.imgWrapLi).width() * index)); //$(setting.imgWrap).css(setting.left, -($(setting.imgWrapLi).width() * index)); } //开启动画 var timer = setInterval(function() { //换成setTimeout只执行一次 index++; next(); }, 2000) //当鼠标移入,移除时,停止动画 $(setting.wrap).hover(function() { clearInterval(timer) }, function() { //不要写var,否则会开启两次定时器 timer = setInterval(function() { index++; next(); }, 2000) }) } })(jQuery) //; //(function() { // var index = 0; // // $(".numWrap").find("li").on("click", function() { // $(".numWrap li").removeClass("one") // $(this).addClass("one"); // index = $(this).index(); // //点击按钮,显示对应图片 // $(".imgWrap").css("left", -($(".imgWrap li").width() * index)); // // }) // // $(".left").on("click", function() { // console.log(index); //2 // index--; // if(index == -1) { //当第一个再往左点的时候,跳转最后一个。 // index = $(".numWrap li").length - 1; // } // $(".numWrap li").removeClass("one"); // $(".numWrap li").eq(index).addClass("one"); // $(".imgWrap").css("left", -($(".imgWrap li").width() * index)); // }) // // $(".right").on("click", function() { // index++; // if(index == 3) { //当第三个再往左点的时候,跳转第个。 // index = 0; // } // $(".numWrap li").removeClass("one") // $(".numWrap li").eq(index).addClass("one") // $(".imgWrap").css("left", -($(".imgWrap li").width() * index)); // }) // // // 动画封装 // function next() { // if(index == $(".imgWrap li").length) { // index = 0 // } // console.log(index); // $(".numWrap li").removeClass("one"); // $(".numWrap li").eq(index).addClass("one"); // $(".imgWrap").css("left", -($(".imgWrap li").width() * index)); // } // // // 开启动画 // var timer = setInterval(function() { //换成setTimeout只执行一次 // index++; // next(); // // }, 2000) // // 当鼠标移入时,停止动画 // $("#wrap").hover(function() { // clearInterval(timer) // }, function() { // timer = setInterval(function() { // index++; // next(); // }, 2000) // }) //})() |