php实现轮播图代码,jquery轮播图的实现代码以及实现的原理

本篇文章给大家带来的内容是关于jquery轮播图的实现代码以及实现的原理，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

源码：

JQuery轮播图

*{

padding:0;

margin:0;

}

.container{

width:600px;

height:400px;

overflow: hidden;

position:relative;

margin:0 auto;

}

.list{

width:3000px;

height:400px;

position:absolute;

}

.list>img{

float:left;

width:600px;

height:400px;

}

.pointer{

position:absolute;

width:100px;

bottom:20px;

left:250px;

}

.pointer>span{

cursor:pointer;

display:inline-block;

width:10px;

height:10px;

background: #7b7d80;

border-radius:50%;

border:1px solid #fff;

}

.pointer .on{

background: #28a4c9;

}

.arrow{

position:absolute;

text-decoration:none;

width:40px;

height:40px;

background: #727d8f;

color:#fff;

font-weight: bold;

line-height:40px;

text-align:center;

top:180px;

display:none;

}

.arrow:hover{

background: #0f0f0f;

}

.left{

left:0;

}

.right{

right:0;

}

.container:hover .arrow{

display:block;

}

>

<

var imgCount = 5;

var index = 1;

var intervalId;

var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合

//自动轮播功能 使用定时器

autoNextPage();

function autoNextPage(){

intervalId = setInterval(function(){

nextPage(true);

},3000);

}

//当鼠标移入 停止轮播

$('.container').mouseover(function(){

console.log('hah');

clearInterval(intervalId);

});

// 当鼠标移出，开始轮播

$('.container').mouseout(function(){

autoNextPage();

});

//点击下一页 上一页的功能

$('.left').click(function(){

nextPage(true);

});

$('.right').click(function(){

nextPage(false);

});

//小圆点的相应功能 事件委托

clickButtons();

function clickButtons(){

var length = buttonSpan.length;

for(var i=0;i

buttonSpan[i].onclick = function(){

$(buttonSpan[index-1]).removeClass('on');

if($(this).attr('index')==1){

index = 5;

}else{

index = $(this).attr('index')-1;

}

nextPage(true);

};

}

}

function nextPage(next){

var targetLeft = 0;

//当前的圆点去掉on样式

$(buttonSpan[index-1]).removeClass('on');

if(next){//往后走

if(index == 5){//到最后一张，直接跳到第一张

targetLeft = 0;

index = 1;

}else{

index++;

targetLeft = -600*(index-1);

}

}else{//往前走

if(index == 1){//在第一张，直接跳到第五张

index = 5;

targetLeft = -600*(imgCount-1);

}else{

index--;

targetLeft = -600*(index-1);

}

}

$('.list').animate({left:targetLeft+'px'});

//更新后的圆点加上样式

$(buttonSpan[index-1]).addClass('on');

}

效果图：

原理：

页面结构方面：将轮播图容器设置成相对定位，宽度设置成图片的宽度；容器中分为四部分：轮播的图片；点击的小按钮；前一张；后一张

样式方面：轮播图容器为相对定位，宽度/高度设置成图片的宽度/高度，设置overflow为hidden；

容器中的每一部分都设置成绝对定位，放到相应的位置；

轮播图片的容器宽度设置成所有图片的宽度和，left开始先设置为0；

每张图片宽度一样，都设成左浮动，左右图片都在一行排列，所以轮播图的实质是装有图片的容器的移动，每次移动的距离为一张图片的宽度，这样每次就只显示一张图片；

前一张/后一张设置成display为none，当鼠标移入总容器时，再设置成display为block

功能方面：自动轮播为一个定时循环机制setInteval，鼠标移入，循环停止，移除循环继续；

相关推荐：