超简单的轮播实现
这个是我用jquery+css实现的一个轮播，效果如下：
操作方式：
1. 鼠标不再轮播界面上时，每个1秒切换一次，循环切换；
2. 当鼠标在轮播界面上时，停止切换，当鼠标离开时，继续切换；
3. 点击下侧的白点，切换到与白点索引相同的图片；
4. 点击左右的箭头，则分别向左或向右切换，循环切换。
主要思路如下：
1. 为了使用尽可能简单，轮播中的按钮都使用在js中生成的方式；
2. 因css的:before和:after伪类不是dom中的元素，所以不能被jquery选中，所以采用计算鼠标点击位置分别处于轮播两端的时候出发向左和向右移动；
3. 为了简单实现，图片切换仅仅是使用css的display是否为none来实现；
4. 将轮播封装成一个对象，这样就便于操作，而且不会影响其他地方。
代码如下：
1 <!DOCTYPE> 2 <html> 3 <head> 4 <title>vue demo</title> 5 <script src="js/jquery-3.2.1.js"></script> 6 <style> 7 body{ 8 width:100%; 9 padding:0; 10 margin:0px; 11 } 12 .carrousel{ 13 text-align:center; 14 position:relative; 15 margin-top:-52.5px; 16 margin-bottom:52.5px; 17 } 18 19 .carrousel:before{ 20 content:""; 21 display:inline-block; 22 width:20px; 23 height:35px; 24 float:left; 25 position:relative; 26 top:50%; 27 margin-top:17.5px; 28 margin-left:10px; 29 background-image:url("images/left.png"); 30 } 31 .carrousel:after{ 32 content:""; 33 display:inline-block; 34 width:20px; 35 height:35px; 36 float:right; 37 position:relative; 38 bottom:50%; 39 margin-top:-35px; 40 margin-right:10px; 41 background-image:url("images/right.png"); 42 } 43 44 .carrousel, .carrousel img{ 45 width:100%; 46 height:480px; 47 } 48 49 .carrousel img{ 50 display:none; 51 } 52 53 .carrousel img.current{ 54 display:inline-block; 55 } 56 57 .carrousel .carrousel-btn-list{ 58 display:inline-block; 59 margin-top:-25px; 60 } 61 62 .carrousel .carrousel-btn-list span{ 63 width:10px; 64 height:10px; 65 margin:0 5px; 66 display:inline-block; 67 border-radius:5px; 68 background-color:#FFF; 69 } 70 71 .carrousel .carrousel-btn-list span.current{ 72 width:20px; 73 } 74 75 </style> 76 <script> 77 var carrousel = { 78 current:1, 79 interval:null, 80 length:0, 81 init: function(){ 82 if($(".carrousel .carrousel-btn-list").length == 0){ 83 var content = '<div class="carrousel-btn-list">'; 84 var length = $(".carrousel img").length; 85 for(var i=0; i<length; i++){ 86 content += "<span></span>"; 87 } 88 content += '</div>'; 89 $(".carrousel").append(content); 90 } 91 this.length = $(".carrousel img").length; 92 $(".carrousel img:first").addClass("current"); 93 $(".carrousel .carrousel-btn-list span:first").addClass("current"); 94 var _this = this; 95 $(".carrousel .carrousel-btn-list span").click(function(){ 96 _this.change($(this).index()); 97 }); 98 }, 99 start: function(){ 100 var _this = this; 101 this.interval = setInterval(function(){ _this.carrouselChange(_this.current);}, 1000); 102 }, 103 stop: function(){ 104 clearInterval(this.interval); 105 }, 106 carrouselChange: function (index){ 107 if(index){ 108 this.change(index); 109 } else { 110 this.change(1); 111 } 112 }, 113 change:function(index){ 114 this.current = index % this.length + 1; 115 $(".carrousel img").removeClass("current"); 116 $(".carrousel .carrousel-btn-list span").removeClass("current"); 117 $(".carrousel img:nth-child(" + this.current + ")").addClass("current"); 118 $(".carrousel .carrousel-btn-list span:nth-child(" + this.current + ")").addClass("current"); 119 120 }, 121 click:function(e){ 122 var x = e.offsetX; 123 var y = e.offsetY; 124 var $img = $(".carrousel img.current"); 125 var ox = $img.offset().left; 126 var oy = $img.offset().top; 127 var height = $img.height(); 128 var width = $img.width(); 129 if(x >= ox && x <= (ox + 20 + 10) && y >= oy && y <= oy + height){ 130 if(this.current <= 1){ 131 this.current = this.length + 1; 132 } 133 this.change(this.current-2); 134 } else if(x >= (ox + width - 10 - 20) && x <= (ox + width) && y >= oy && y <= oy + height){ 135 if(this.current == 0){ 136 this.current = 1; 137 this.change(this.current); 138 } 139 this.change(this.current); 140 } 141 }, 142 }; 143 $(function(){ 144 carrousel.init(); 145 carrousel.start(); 146 $(".carrousel").hover(function(){ 147 carrousel.stop(); 148 }, function(){ 149 carrousel.start(); 150 }); 151 $(document).click(function(e){ 152 carrousel.click(e); 153 }); 154 }); 155 </script> 156 </head> 157 <body> 158 <div class="carrousel"> 159 <img src="images/1.jpg"/> 160 <img src="images/2.jpg"/> 161 <img src="images/3.jpg"/> 162 <img src="images/4.jpg"/> 163 <img src="images/5.jpg"/> 164 </div> 165 </body> 166 </html>
使用的时候要注意在css中修改轮播界面的大小，即如下图中的代码所示：
个人觉得，这个虽然写的简单，但也算是巧妙，希望对你有所帮助。代码下载地址如下：
https://pan.baidu.com/s/1yRb6HHixfWHxSLFU5p5FKw， 密码：ga3m
