这个是我用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 .carrousel{ 8 text-align:center; 9 position:relative; 10 } 11 12 .carrousel:before{ 13 content:""; 14 display:inline-block; 15 width:20px; 16 height:35px; 17 float:left; 18 position:relative; 19 top:50%; 20 margin-top:17.5px; 21 margin-left:10px; 22 background-image:url("images/left.png"); 23 } 24 .carrousel:after{ 25 content:""; 26 display:inline-block; 27 width:20px; 28 height:35px; 29 float:right; 30 position:relative; 31 bottom:50%; 32 margin-top:-35px; 33 margin-right:10px; 34 background-image:url("images/right.png"); 35 } 36 37 .carrousel, .carrousel img{ 38 width:640px; 39 height:480px; 40 } 41 42 .carrousel img{ 43 display:none; 44 } 45 46 .carrousel img.current{ 47 display:inline-block; 48 } 49 50 .carrousel .carrousel-btn-list{ 51 display:inline-block; 52 margin-top:-25px; 53 } 54 55 .carrousel .carrousel-btn-list span{ 56 width:10px; 57 height:10px; 58 margin:0 5px; 59 display:inline-block; 60 border-radius:5px; 61 background-color:#FFF; 62 } 63 64 .carrousel .carrousel-btn-list span.current{ 65 width:20px; 66 } 67 68 </style> 69 <script> 70 var carrousel = { 71 current:1, 72 interval:null, 73 length:0, 74 init: function(){ 75 if($(".carrousel .carrousel-btn-list").length == 0){ 76 var content = '<div class="carrousel-btn-list">'; 77 var length = $(".carrousel img").length; 78 for(var i=0; i<length; i++){ 79 content += "<span></span>"; 80 } 81 content += '</div>'; 82 $(".carrousel").append(content); 83 } 84 this.length = $(".carrousel img").length; 85 $(".carrousel img:first").addClass("current"); 86 $(".carrousel .carrousel-btn-list span:first").addClass("current"); 87 var _this = this; 88 $(".carrousel .carrousel-btn-list span").click(function(){ 89 _this.change($(this).index()); 90 }); 91 }, 92 start: function(){ 93 var _this = this; 94 this.interval = setInterval(function(){ _this.carrouselChange(_this.current);}, 1000); 95 }, 96 stop: function(){ 97 clearInterval(this.interval); 98 }, 99 carrouselChange: function (index){ 100 if(index){ 101 this.change(index); 102 } else { 103 this.change(1); 104 } 105 }, 106 change:function(index){ 107 this.current = index % this.length + 1; 108 $(".carrousel img").removeClass("current"); 109 $(".carrousel .carrousel-btn-list span").removeClass("current"); 110 $(".carrousel img:nth-child(" + this.current + ")").addClass("current"); 111 $(".carrousel .carrousel-btn-list span:nth-child(" + this.current + ")").addClass("current"); 112 113 }, 114 click:function(e){ 115 var x = e.offsetX; 116 var y = e.offsetY; 117 var $img = $(".carrousel img.current"); 118 var ox = $img.offset().left; 119 var oy = $img.offset().top; 120 var height = $img.height(); 121 var width = $img.width(); 122 if(x >= ox && x <= (ox + 20 + 10) && y >= oy && y <= oy + height){ 123 if(this.current <= 1){ 124 this.current = this.length + 1; 125 } 126 this.change(this.current-2); 127 } else if(x >= (ox + width - 10 - 20) && x <= (ox + width) && y >= oy && y <= oy + height){ 128 if(this.current == 0){ 129 this.current = 1; 130 this.change(this.current); 131 } 132 this.change(this.current); 133 } 134 }, 135 }; 136 $(function(){ 137 carrousel.init(); 138 carrousel.start(); 139 $(".carrousel").hover(function(){ 140 carrousel.stop(); 141 }, function(){ 142 carrousel.start(); 143 }); 144 $(document).click(function(e){ 145 carrousel.click(e); 146 }); 147 }); 148 </script> 149 </head> 150 <body> 151 <div class="carrousel"> 152 <img src="images/1.jpg"/> 153 <img src="images/2.jpg"/> 154 <img src="images/3.jpg"/> 155 <img src="images/4.jpg"/> 156 <img src="images/5.jpg"/> 157 </div> 158 </body> 159 </html>
使用的时候要注意在css中修改轮播界面的大小，即如下图中的代码所示：
个人觉得，这个虽然写的简单，但也算是巧妙，希望对你有所帮助。代码下载地址如下：
https://pan.baidu.com/s/1yRb6HHixfWHxSLFU5p5FKw， 密码：ga3m