<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{ margin: 0; padding: 0; } #banner{ position: relative; width:400px; height:300px; } #show{ width:400px; height:300px; border:2px solid #f00; overflow:hidden; } #con{ width:1600px; height:300px; } img{ width:400px; height:300px; } #btn{ list-style-type:none; position:absolute; left:50%; top:270px; } #btn li{ float:left; width:15px; height:15px; font-size:12px; text-align:center; background:#fff; border-radius:50%; margin-left:5px; cursor: pointer; } #btn .bg{ background:#000; color:#fff; } .eds-page-ioc{ display: inline-block; position: absolute; top: 115px; width: 46px; height: 70px; cursor: pointer; } .eds-prev{ left: 0; background: url(focus_btn.png) no-repeat 0 -70px; } .eds-next{ right: 0; background: url(focus_btn.png) no-repeat -46px -70px; } .eds-prev:hover{ background: url(focus_btn.png) no-repeat 0 0; } .eds-next:hover{ background: url(focus_btn.png) no-repeat -46px 0; } </style> <script type="text/javascript" src="jquery-3.3.1.min.js"></script></head><body><div id="banner"> <div id="show"> <div id="con"><img src="c1.jpg" name="0"><img src="c2.jpg" name="1"><img src="c3.jpg" name="2"><img src="c4.jpg" name="3"><img src="c5.jpg" name="4"></div> <ul id="btn"></ul> <span class="eds-page-ioc eds-prev"></span> <span class="eds-page-ioc eds-next"></span> </div></div></body><script type="text/javascript"> $(function () { $("#con").lun(1000,"bg"); }) $.fn.lun=function(stTime,btnListStyle) { var selector = $(this); stTime = stTime || 1000; imageWidth = $(this).children().width(); //添加下标 for(var i = 1;i <= selector.children().length;i++){ selector.next().append("<li>"+i+"</li>") } selector.next().children().eq(0).attr("class", btnListStyle); var btnListMargin=parseInt(selector.next().children().css("marginLeft").slice(0,-2));//获取下标的margin-left值 var btnWidth=(selector.next().children().width()-btnListMargin)*(selector.children().length);// 获取下标容器的宽度 selector.next().css("marginLeft","-"+btnWidth+"px"); //自动轮播 var timer; var st = setTimeout(move, stTime); function move() { timer = setInterval(function () { ss(selector); }, 100); } function ss(selector) { selector.next().children().removeClass(btnListStyle); var i = selector.children().eq(1).attr("name"); selector.next().children().eq(i).attr("class", btnListStyle); var os = parseInt(selector.parent().scrollLeft()); selector.parent().scrollLeft(os + 10); if (selector.parent().scrollLeft() >= imageWidth) { selector.append(selector.children().eq(0)); selector.parent().scrollLeft(0); clearInterval(timer); st = setTimeout(move, stTime); } } //点击下标跳转到相应的图片 selector.next().children().click(function(){ selector.next().children().removeClass(btnListStyle); $(this).attr("class",btnListStyle); for(var j=0;j<selector.children().length;j++){ var f=selector.children().eq(j).attr("name"); if(f==$(this).html()-1){ for(var x=0;x<j;x++){ selector.append(selector.children().eq(0)); selector.parent().scrollLeft(0); } break; } } }) //左切图 selector.nextAll().eq(1).click(function(){ selector.parent().scrollLeft(0); selector.prepend(selector.children().eq(4)); var zz; for(var i=0;i<selector.next().children().length;i++){ if(selector.next().children().eq(i).attr("class")==btnListStyle){ console.log(selector.children().length); zz=i; if(zz==0){ zz=selector.children().length; } break; } } selector.next().children().removeClass(btnListStyle); selector.next().children().eq(zz-1).attr("class",btnListStyle); selector.parent().scrollLeft(0); }) //右切图 selector.nextAll().eq(2).click(function(){ selector.append(selector.children().eq(0)); var zz; for(var i=0;i<selector.next().children().length;i++){ if(selector.next().children().eq(i).attr("class")==btnListStyle){ zz=i; if(zz==selector.children().length-1){ zz=-1; } break; } } selector.next().children().removeClass(btnListStyle); selector.next().children().eq(zz+1).attr("class",btnListStyle); }) //鼠标划入停止 var zf; selector.parents().eq(1).hover(function(){ var zz; clearInterval(timer); clearTimeout(st); if(selector.parents().scrollLeft()==0){ zf=0; }else if(selector.parents().scrollLeft()>0&&selector.parents().scrollLeft()<=200) { zf=0; selector.parents().scrollLeft(0); for (var i = 0; i < selector.next().children().length; i++) { if (selector.next().children().eq(i).attr("class") == btnListStyle) { if (i == 0) { zz = selector.children().length; } zz = i-1; } } selector.next().children().removeClass(btnListStyle); selector.next().children().eq(zz).attr("class", btnListStyle); }else if(selector.parents().scrollLeft()>200) { zf = 1; selector.parents().scrollLeft(400); for (var i = 0; i < selector.next().children().length; i++) { if (selector.next().children().eq(i).attr("class") == btnListStyle) { if (i == selector.children().length-1) { zz = 0; } zz = i; } } selector.next().children().removeClass(btnListStyle); selector.next().children().eq(zz).attr("class", btnListStyle); } },function(){ if(zf==0){ st=setTimeout(move,1000); }else if(zf==1){ move(); } }) }</script></body></html>
来源：https://www.cnblogs.com/bingjiebeibei/p/9253347.html