php实现轮播图实例,JS实现图片轮播的实例

本文主要为大家带来一篇使用JS实现图片轮播的实例(前后首尾相接)，代码参考了一位已经写好了图片轮播功能的(再次表示感谢)，但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。

效果如下：

图片轮播

body,p,ul,li,a,img{margin: 0;padding: 0;}

ul,li{list-style: none;}

a{text-decoration: none;}

#wrapper{

position: relative;

margin: 30px auto; /* 上下边距30px，水平居中 */

width: 400px;

height: 200px;

}

#banner{

position:relative;

width: 400px;

height: 200px;

overflow: hidden;

}

.imgList{

position:relative;

width:2000px;

height:200px;

z-index: 10;

overflow: hidden;

}

.imgList li{float:left;display: inline;}

#prev,

#next{

position: absolute;

top:80px;

z-index: 20;

cursor: pointer;

opacity: 0.2;

filter:alpha(opacity=20);

}

#prev{left: 10px;}

#next{right: 10px;}

#prev:hover,

#next:hover{opacity: 0.5;filter:alpha(opacity=50);}

• 
• 
• 
• 
• 

var curIndex = 0, //当前index

imgLen = $(".imgList li").length; //图片总数

$(".imgList").css("width", (imgLen+1)*400+"px");

// 定时器自动变换3秒每次

var autoChange = setInterval(function(){

if(curIndex < imgLen-1){

curIndex ++;

}else{

curIndex = 0;

}

//调用变换处理函数

changeTo(curIndex);

},3000);

//左箭头滑入滑出事件处理

$("#prev").hover(function(){

//滑入清除定时器

clearInterval(autoChange);

}, function(){

//滑出则重置定时器

autoChangeAgain();

});

//左箭头点击处理

$("#prev").click(function(){

//根据curIndex进行上一个图片处理

// curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);

if (curIndex == 0) {

var element = document.createElement("li");

element.innerHTML = $(".imgList li")[imgLen - 1].innerHTML;

// $(".imgList li")[imgLen - 1].remove();

$(".imgList").prepend(element);

$(".imgList").css("left", -1*400+"px");

changeTo(curIndex);

curIndex = -1;

} else if (curIndex == -1) {

$(".imgList").css("left", -(imgLen-1)*400+"px");

curIndex = imgLen-2;

$(".imgList li")[0].remove();

changeTo(curIndex);

} else {

--curIndex;

changeTo(curIndex);

}

});

//右箭头滑入滑出事件处理

$("#next").hover(function(){

//滑入清除定时器

clearInterval(autoChange);

}, function(){

//滑出则重置定时器

autoChangeAgain();

});

//右箭头点击处理

$("#next").click(function(){

// curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;

console.log(imgLen);

if (curIndex == imgLen-1) {

var element = document.createElement("li");

element.innerHTML = $(".imgList li")[0].innerHTML;

// $(".imgList li")[0].remove();

$(".imgList").append(element);

++curIndex;

} else if (curIndex == imgLen) {

curIndex = 0;

$(".imgList").css("left", "0px");

$(".imgList li")[imgLen].remove();

curIndex++;

} else {

++curIndex;

}

changeTo(curIndex);

});

//清除定时器时候的重置定时器--封装

function autoChangeAgain(){

autoChange = setInterval(function(){

if(curIndex < imgLen-1){

curIndex ++;

}else{

curIndex = 0;

}

//调用变换处理函数

changeTo(curIndex);

},3000);

}

function changeTo(num){

var goLeft = num * 400;

$(".imgList").animate({left: "-" + goLeft + "px"},500);

}

相关推荐：