项目源代码下载地址：轮播图
以下为项目实现效果：（由于gif太大，所以只上传一张图片，但效果完全能实现，经测试，在ie各版本浏览器及chrome，firefox等浏览器中均能实现效果，可以实现点击切换图片，无缝滚动和非无缝滚动两种效果）
页面源代码：index.html(以下注释自行切换，为了项目清晰，所以用了四个js文件，分别实现不同的效果)
<!DOCTYPE html><html lang="zh-CN"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" ?????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>轮播图</title> ???<link rel="stylesheet" href="css/index.css"></head><body><div class="slider"> ???<div class="slider-inner" id="slider_inner"> ???????<button class="btn-left" id="btn_left"><</button> ???????<button class="btn-right" id="btn_right">></button> ???</div></div><script src="js/jquery-1.12.4.js"></script><script src="js/jquery1.js"></script><!--<script src="js/jquery2.js"></script>--><!--<script src="js/js1.js"></script>--><!--<script src="js/js2.js"></script>--></body></html>
index.css（以下为项目css文件，解决了ie低版本浏览器的兼容问题，不然的话会出现一些问题）
/***Created by xxc on 2019/4/28*/*{ ???margin: 0; ???padding: 0;}a{ ???display: block;}li{ ???list-style: none; ???vertical-align: middle;}img{ ???display: block;//兼容ie ???border-width: 0;//兼容ie}.slider{ ???width: 730px; ???height: 454px; ???margin: 20px auto; ???border: 1px solid #ccc; ???padding: 5px;}.slider .slider-inner{ ???width: 100%; ???height: 100%; ???overflow: hidden; ???position: relative;}.slider .slider-inner ul{ ???width: 800%; ???position: absolute; ???left: 0; ???top: 0;}.slider .slider-inner ul li{ ???float: left; ???display: block;}.slider .slider-indicator{ ???position: absolute; ???right: 50px; ???bottom: 20px; ???z-index: 1001;}.slider .slider-indicator i{ ???display: inline-block; ???width: 20px; ???height: 20px; ???text-align: center; ???line-height: 20px; ???background-color: #fff; ???cursor: pointer; ???font-style: normal; ???margin-left: 5px;}.slider .slider-indicator i.current,.slider .slider-indicator i:hover{ ???background-color: orange;}.slider .slider-inner button{ ???width: 20px; ???height: 40px; ???background-color: #aeb5ad; ???background-color: rgba(0,0,0,.3); ???position: absolute; ???top: 50%; ???margin-top: -20px; ???z-index: 1; ???border: none; ???outline: none; ???color: #fff; ???cursor: pointer;}.slider .slider-inner button.btn-right{ ???right: 0;}以下为js的四种实现方法：
js1.js代码：
/** *Created by xxc on 2019/4/28 */var images = [ ???"images/1.jpg", ???"images/2.jpg", ???"images/3.jpg", ???"images/4.jpg", ???"images/5.jpg", ???"images/6.jpg"]function $(id) { ???return document.getElementById(id);}function getFirstElementByParent(parent) { ???if(parent.firstElementChild){ ???????return parent.firstElementChild; ???}else{ ???????var ele=parent.firstChild; ???????while (ele&&ele.nodeType!==1){ ???????????ele=ele.nextSibling; ???????} ???????return ele; ???}}window.onload = function () { ???function slider(images,speed,imgWidth) { ???????var ul = document.createElement(‘ul‘); ???????ul.setAttribute(‘id‘,‘slider_list‘); ???????for(var j = 0;j<images.length;j++){ ???????????var li = document.createElement(‘li‘); ???????????var a = document.createElement(‘a‘); ???????????var img = document.createElement(‘img‘); ???????????img.setAttribute(‘src‘,images[j]); ???????????a.appendChild(img); ???????????li.appendChild(a); ???????????ul.appendChild(li); ???????} ???????$("slider_inner").appendChild(ul); ???????var div = document.createElement(‘div‘); ???????div.setAttribute(‘class‘,‘slider-indicator‘); ???????div.setAttribute(‘id‘,‘slider_indicator‘); ???????for(var j = 0;j<images.length;j++){ ???????????var i = document.createElement(‘i‘); ???????????i.innerHTML = j+1; ???????????div.appendChild(i); ???????} ???????getFirstElementByParent(div).setAttribute(‘class‘,‘current‘); ???????$("slider_inner").appendChild(div); ???????var isquares = $("slider_indicator").getElementsByTagName("i"); ???????var timer=null,i=0; ???????function animate(){ ???????????i--; ???????????if(i<-(images.length-1)){ ???????????????i=0; ???????????} ???????????$("slider_list").style.left = i*imgWidth+"px"; ???????????for(var j = 0;j<isquares.length;j++){ ???????????????isquares[j].removeAttribute(‘class‘,‘‘); ???????????} ???????????isquares[-i].setAttribute(‘class‘,‘current‘); ???????} ???????timer = setInterval(animate,speed); ???????for(var k = 0;k<isquares.length;k++){ ???????????isquares[k].index = k+1; ???????????isquares[k].onmouseover = function () { ???????????????clearInterval(timer); ???????????????for(var j = 0;j<isquares.length;j++){ ???????????????????isquares[j].removeAttribute(‘class‘,‘‘); ???????????????} ???????????????this.setAttribute(‘class‘,‘current‘); ???????????????i=-(this.index-1); ???????????????$("slider_list").style.left = i*imgWidth+"px"; ???????????????timer = setInterval(animate,speed); ???????????} ???????} ???????$("btn_left").onclick = function () { ???????????i++; ???????????if(i>0){ ???????????????i=-(images.length-1); ???????????} ???????????for(var j = 0;j<isquares.length;j++){ ???????????????isquares[j].removeAttribute(‘class‘,‘‘); ???????????} ???????????isquares[-i].setAttribute(‘class‘,‘current‘); ???????????$("slider_list").style.left = i*imgWidth+"px"; ???????} ???????$("btn_right").onclick = function () { ???????????i--; ???????????if(i<-(images.length-1)){ ???????????????i=0; ???????????} ???????????for(var j = 0;j<isquares.length;j++){ ???????????????isquares[j].removeAttribute(‘class‘,‘‘); ???????????} ???????????isquares[-i].setAttribute(‘class‘,‘current‘); ???????????$("slider_list").style.left = i*imgWidth+"px"; ???????} ???????$("slider_inner").onmouseover = function () { ???????????clearInterval(timer); ???????} ???????$("slider_inner").onmouseout = function () { ???????????timer = setInterval(animate,speed); ???????} ???} ???//images:图片数据 ???//2000：轮播速度 ???//730：图片宽度 ???slider(images,2000,730);}js2.js代码：
/** *Created by xxc on 2019/4/28 */var images = [ ???"images/1.jpg", ???"images/2.jpg", ???"images/3.jpg", ???"images/4.jpg", ???"images/5.jpg", ???"images/6.jpg"]function $(id) { ???return document.getElementById(id);}function getFirstElementByParent(parent) { ???if(parent.firstElementChild){ ???????return parent.firstElementChild; ???}else{ ???????var ele=parent.firstChild; ???????while (ele&&ele.nodeType!==1){ ???????????ele=ele.nextSibling; ???????} ???????return ele; ???}}window.onload = function () { ???var length = images.length ???function animate(element,target) { ???????var now = element.offsetLeft; ???????var step = now > target ? -10 : 10; ???????var timers = setInterval(function () { ???????????now += step; ???????????if(Math.abs(now-target)<=Math.abs(step)){ ???????????????clearInterval(timers); ???????????????element.style.left = target+"px"; ???????????}else { ???????????????element.style.left = now+"px"; ???????????} ???????},10) ???} ???function slider(images,speed,imgWidth) { ???????var ul = document.createElement(‘ul‘); ???????ul.setAttribute(‘id‘,‘slider_list‘); ???????for(var j = 0;j<length;j++){ ???????????var li = document.createElement(‘li‘); ???????????var a = document.createElement(‘a‘); ???????????var img = document.createElement(‘img‘); ???????????img.setAttribute(‘src‘,images[j]); ???????????a.appendChild(img); ???????????li.appendChild(a); ???????????ul.appendChild(li); ???????} ???????ul.appendChild(getFirstElementByParent(ul).cloneNode(true)); ???????$("slider_inner").appendChild(ul); ???????var div = document.createElement(‘div‘); ???????div.setAttribute(‘class‘,‘slider-indicator‘); ???????div.setAttribute(‘id‘,‘slider_indicator‘); ???????for(var j = 0;j<images.length;j++){ ???????????var i = document.createElement(‘i‘); ???????????i.innerHTML = j+1; ???????????div.appendChild(i); ???????} ???????getFirstElementByParent(div).setAttribute(‘class‘,‘current‘); ???????$("slider_inner").appendChild(div); ???????var isquares = $("slider_indicator").getElementsByTagName("i"); ???????var timer=null,i=0; ???????function autoPlay(){ ???????????if(i==-length){ ???????????????$("slider_list").style.left = 0; ???????????????i=0; ???????????} ???????????i--; ???????????animate($("slider_list"),i*imgWidth); ???????????for(var j = 0;j<length;j++){ ???????????????isquares[j].removeAttribute(‘class‘,‘‘); ???????????} ???????????if(i==-length){ ???????????????isquares[0].setAttribute(‘class‘,‘current‘); ???????????}else { ???????????????isquares[-i].setAttribute(‘class‘,‘current‘); ???????????} ???????} ???????timer = setInterval(autoPlay,speed); ???????for(var k = 0;k<isquares.length;k++){ ???????????isquares[k].index = k+1; ???????????isquares[k].onmouseover = function () { ???????????????clearInterval(timer); ???????????????for(var j = 0;j<isquares.length;j++){ ???????????????????isquares[j].removeAttribute(‘class‘,‘‘); ???????????????} ???????????????this.setAttribute(‘class‘,‘current‘); ???????????????i=-(this.index-1); ???????????????$("slider_list").style.left = i*imgWidth+"px"; ???????????????timer = setInterval(autoPlay,speed); ???????????} ???????} ???????$("btn_left").onclick = function () { ???????????clearInterval(timer); ???????????if(i==0){ ???????????????i=-length; ???????????????$("slider_list").style.left = i*imgWidth+"px"; ???????????} ???????????for(var j = 0;j<isquares.length;j++){ ???????????????isquares[j].removeAttribute(‘class‘,‘‘); ???????????} ???????????i++; ???????????isquares[-i].setAttribute(‘class‘,‘current‘); ???????????animate($("slider_list"),i*imgWidth) ???????} ???????$("btn_right").onclick = function () { ???????????clearInterval(timer); ???????????if(i==-length){ ???????????????i=0; ???????????????$("slider_list").style.left = 0; ???????????} ???????????for(var j = 0;j<isquares.length;j++){ ???????????????isquares[j].removeAttribute(‘class‘,‘‘); ???????????} ???????????i--; ???????????if(i==-length){ ???????????????animate($("slider_list"),i*imgWidth) ???????????????isquares[0].setAttribute(‘class‘,‘current‘); ???????????}else { ???????????????isquares[-i].setAttribute(‘class‘,‘current‘); ???????????????animate($("slider_list"),i*imgWidth) ???????????} ???????} ???????$("slider_inner").onmouseover = function () { ???????????clearInterval(timer); ???????} ???????$("slider_inner").onmouseout = function () { ???????????timer = setInterval(autoPlay,speed); ???????} ???} ???//images:图片数据 ???//2000：轮播速度 ???//730：图片宽度 ???slider(images,2000,730);}jquery1.js代码：
/** *Created by xxc on 2019/4/28 */var images = [ ???"images/1.jpg", ???"images/2.jpg", ???"images/3.jpg", ???"images/4.jpg", ???"images/5.jpg", ???"images/6.jpg"];$(function () { ???function animate(images,speed,imgWidth) { ???????var length = images.length; ???????$("#slider_inner").append("<ul id=‘slider_list‘></ul><div id=‘slider_indicator‘ class=‘slider-indicator‘></div>"); ???????for(var i = 0;i<images.length;i++){ ???????????$("#slider_inner #slider_list").append("<li><a href=‘#‘><img src=‘"+images[i]+"‘></a></li>") ???????????$("#slider_indicator").append("<i>"+(i+1)+"</i>"); ???????} ???????$("#slider_indicator i:eq(0)").addClass("current"); ???????var timer = null,k=0; ???????function autoPlay(){ ???????????k--; ???????????if(k<-(length-1)){ ???????????????k=0; ???????????} ???????????$("#slider_list").css(‘left‘,k*imgWidth+‘px‘); ???????????$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current"); ???????} ???????timer = setInterval(autoPlay,speed) ???????$("#slider_indicator i").mouseover(function () { ???????????clearInterval(timer); ???????????var $this = $(this); ???????????$("#slider_list").css(‘left‘,-($this.index())*imgWidth+‘px‘); ???????????k=-($this.index()); ???????????$this.addClass("current").siblings().removeClass("current"); ???????????timer = setInterval(autoPlay,speed) ???????}) ???????$("#btn_left").click(function () { ???????????k++; ???????????if(k>0){ ???????????????k=-(length-1); ???????????} ???????????$("#slider_list").css(‘left‘,k*imgWidth+‘px‘); ???????????$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current"); ???????}) ???????$("#btn_right").click(function () { ???????????k--; ???????????if(k<-(length-1)){ ???????????????k=0; ???????????} ???????????$("#slider_list").css(‘left‘,k*imgWidth+‘px‘); ???????????$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current"); ???????}) ???????$("#slider_inner").mouseover(function () { ???????????clearInterval(timer); ???????}).mouseout(function () { ???????????timer = setInterval(autoPlay,speed) ???????}) ???} ???animate(images,2000,730);})jquery2.js代码
/** *Created by xxc on 2019/4/28 */var images = [ ???"images/1.jpg", ???"images/2.jpg", ???"images/3.jpg", ???"images/4.jpg", ???"images/5.jpg", ???"images/6.jpg"];$(function () { ???function animates(images,speed,imgWidth) { ???????var length = images.length; ???????$("#slider_inner").append("<ul id=‘slider_list‘></ul><div id=‘slider_indicator‘ class=‘slider-indicator‘></div>"); ???????for(var i = 0;i<images.length;i++){ ???????????$("#slider_inner #slider_list").append("<li><a href=‘#‘><img src=‘"+images[i]+"‘></a></li>") ???????????$("#slider_indicator").append("<i>"+(i+1)+"</i>"); ???????} ???????$("#slider_indicator i:eq(0)").addClass("current"); ???????$("#slider_inner #slider_list").append("<li><a href=‘#‘><img src=‘"+images[0]+"‘></a></li>") ???????var timer = null,k=0; ???????function autoPlay(){ ???????????k--; ???????????$("#slider_list").animate({‘left‘:k*imgWidth+‘px‘},1000); ???????????if(k==-length){ ???????????????$("#slider_indicator i:eq(0)").addClass("current").siblings("i").removeClass("current"); ???????????????$("#slider_list").animate({‘left‘:0},0); ???????????????k=0 ???????????}else { ???????????????$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current"); ???????????} ???????} ???????timer = setInterval(autoPlay,speed) ???????$("#slider_inner").mouseover(function () { ???????????clearInterval(timer); ???????}).mouseout(function () { ???????????timer = setInterval(autoPlay,speed) ???????}) ???????$("#slider_indicator i").mouseover(function () { ???????????clearInterval(timer); ???????????var $this = $(this); ???????????$("#slider_list").css(‘left‘,-($this.index())*imgWidth+‘px‘); ???????????k=-($this.index()); ???????????$this.addClass("current").siblings().removeClass("current"); ???????????timer = setInterval(autoPlay,speed); ???????}) ???????$("#btn_left").click(function () { ???????????k++; ???????????if(k==1){ ???????????????$("#slider_list").animate({‘left‘:-length*imgWidth+‘px‘},0); ???????????????$("#slider_list").animate({‘left‘:-(length-1)*imgWidth+‘px‘},1000); ???????????????$("#slider_indicator i:eq("+(length-1)+")").addClass("current").siblings("i").removeClass("current"); ???????????????k=-(length-1); ???????????}else { ???????????????$("#slider_list").animate({‘left‘:k*imgWidth+‘px‘},1000); ???????????????$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current"); ???????????} ???????}) ???????$("#btn_right").click(function () { ???????????k--; ???????????????$("#slider_list").animate({‘left‘:k*imgWidth+‘px‘},1000); ???????????if(k==-length){ ???????????????$("#slider_indicator i:eq(0)").addClass("current").siblings("i").removeClass("current"); ???????????????$("#slider_list").animate({‘left‘:0},0); ???????????????k=0 ???????????}else { ???????????????$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current"); ???????????} ???????}) ???} ???animates(images,2000,730);})轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
原文地址：https://www.cnblogs.com/alex-xxc/p/10793277.html