轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
项目源代码下载地址：轮播图
以下为项目实现效果：（由于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); })
