您的位置：首页 > Web前端 > JQuery
图片轮播自动手动Jquery

2014-09-26 16:20 363 查看
百度云盘下载：<a target=_blank href="http://pan.baidu.com/s/1mg3dcNY">http://pan.baidu.com/s/1mg3dcNY</a>

<style>
.outter{display:block; width:923px; height:340px; overflow:hidden; position:relative; margin:0 auto;}
.list{display:block; height:340px; position:relative; left:0;}
.list .image{ display:block; width:923px; height:340px; float:left;}
.control{ display:block; width:50px; height:50px; color:#fff; top:50%; margin-top:-25px; cursor:pointer; z-index:5; position:absolute; font-size:48px;}
.control.left{ left:5%;}
.control.right{ right:5%;}
.dots{ display:block;position:absolute;text-align:center; bottom:30px; z-index:5; width:100%;}
.dots span{ display:inline-block; width:10px; height:10px; background:#fff; position:relative; border-radius:5px; cursor:pointer; margin:0 10px;}
.dots span.active{ background:#f00;}
</style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片轮播</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>

<div class="outter">
<div class="list">
<div class="image">
<img src="images/1.jpg"/>
</div>
<div class="image">
<img src="images/2.jpg"/>
</div>
<div class="image">
<img src="images/3.jpg"/>
</div>
<div class="image">
<img src="images/4.jpg"/>
</div>
</div>
</div>

</body>
</html><script>
$(function(){
play();
})
function play(){
//初始化
var nums = $('.list').find('.image').length;
var perWidth = $('.list').find('.image').outerWidth();
var allWidth = perWidth*nums;
var withCloneWidth = perWidth*(nums+2);
var firstChild = $('.list').find('.image').first().clone();
var lastChild = $('.list').find('.image').last().clone();
var speed = 500;
var autoSpeed = 3000;
var isPlay = false;
firstChild.addClass('clone-first-img');
lastChild.addClass('clone-last-img');
var dot = '';
for(var i=0;i<nums;i++){
var myclass = ' class=""';
if(i==0) myclass = ' class="active"';
dot +='<span'+myclass+' date-index='+i+'></span>';
}
$('.list').after('<div class="dots">'+dot+'</div>');
$('.list').after('<div class="control left"><</div><div class="control right">></div>');
$('.list').css('width',withCloneWidth+'px');
$('.list').find('.image').last().after(firstChild);
$('.list').find('.image').first().before(lastChild);
$('.list').css('left',-perWidth+'px');

//自动轮播
var auto = function(){
var nowLeft = parseInt($('.list').css('left'));
var targetIndex = Math.abs(nowLeft/perWidth);
if(targetIndex == nums) targetIndex = 0;
if(isPlay == false){
//动画过程中点击无效
isPlay = true;
$('.list').animate({'left':nowLeft - perWidth+'px'},speed,function(){
if(nowLeft== -(allWidth)) $('.list').css('left',- perWidth+'px');
$('.dots').find('span').removeClass('active').eq(targetIndex).addClass('active');
isPlay = false;
});

}
}

auto_play = setInterval(auto,autoSpeed);

//点击左右按钮
$('.control').click(function(e) {
var direction;
if($(this).hasClass('left'))  direction='left';
else if($(this).hasClass('right'))  direction='right';
var nowLeft = parseInt($('.list').css('left'));
var nowIndex = -(nowLeft/perWidth)-1;
var targetIndex;
if(isPlay == false){
isPlay = true;
clearInterval(auto_play);
if(direction=='right') {
targetIndex = nowIndex + 1;
if(targetIndex == nums) targetIndex = 0;
$('.list').animate({'left':nowLeft - perWidth+'px'},speed,function(){
if(nowLeft== -(allWidth)) $('.list').css('left',- perWidth+'px');
$('.dots').find('span').removeClass('active').eq(targetIndex).addClass('active');
isPlay = false;
auto_play = setInterval(auto,autoSpeed);
});
}
if(direction=='left') {
targetIndex = nowIndex - 1;
if(targetIndex == -1) targetIndex = nums-1;
$('.list').animate({'left':nowLeft + perWidth+'px'},speed,function(){
if(nowLeft== -(perWidth)) $('.list').css('left',-allWidth+'px');
$('.dots').find('span').removeClass('active').eq(targetIndex).addClass('active');
isPlay = false;
auto_play = setInterval(auto,autoSpeed);
});
};
}
return false;
});

$('.dots').find('span').click(function(e) {
var targetIndex = $('.dots').find('span').index(this);
var targetLeft = (targetIndex+1)*perWidth;
if(isPlay == false){
clearInterval(auto_play);
isPlay = true;
$('.list').animate({'left':-targetLeft+'px'},speed,function(){
$('.dots').find('span').removeClass('active').eq(targetIndex).addClass('active');
isPlay = false;
auto_play = setInterval(auto,autoSpeed);
});
}
return false;
});

return false;
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航