图片轮播html1001无标题,轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器...

项目源代码下载地址：

以下为项目实现效果：(由于gif太大，所以只上传一张图片，但效果完全能实现，经测试，在ie各版本浏览器及chrome，firefox等浏览器中均能实现效果，可以实现点击切换图片，无缝滚动和非无缝滚动两种效果)

页面源代码：index.html(以下注释自行切换，为了项目清晰，所以用了四个js文件，分别实现不同的效果)

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

轮播图

<

>

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

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

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

i=0;

}

$("slider_list").style.left = i*imgWidth+"px";

for(var j = 0;j

isquares[j].removeAttribute('class','');

}

isquares[-i].setAttribute('class','current');

}

timer = setInterval(animate,speed);

for(var k = 0;k

isquares[k].index = k+1;

isquares[k].onmouseover = function () {

clearInterval(timer);

for(var j = 0;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[j].removeAttribute('class','');

}

isquares[-i].setAttribute('class','current');

$("slider_list").style.left = i*imgWidth+"px";

}

$("btn_right").onclick = function () {

i--;

if(i

i=0;

}

for(var j = 0;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

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

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

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[k].index = k+1;

isquares[k].onmouseover = function () {

clearInterval(timer);

for(var j = 0;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[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[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("

for(var i = 0;i

$("#slider_inner #slider_list").append("

")

$("#slider_indicator").append(""+(i+1)+"");

}

$("#slider_indicator i:eq(0)").addClass("current");

var timer = null,k=0;

function autoPlay(){

k--;

if(k

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

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("

for(var i = 0;i

$("#slider_inner #slider_list").append("

")

$("#slider_indicator").append(""+(i+1)+"");

}

$("#slider_indicator i:eq(0)").addClass("current");

$("#slider_inner #slider_list").append("

")

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);

})

来源：https://www.cnblogs.com/alex-xxc/p/10793277.html