用jquery面向对象实现的图片自动轮播

我行我上 2015-09-29 05:58:35

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片自动轮播</title>

<link rel="stylesheet" type="text/css" href="css/showPictures-inTurn.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js">
</script>
</head>
<body id="show-pictures-in-turn">
<div class="banner">
<a href="javascript:;" class="banner_title"></a>
<ul class="banner_list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="banner_pic">
<a href="javascript:;">
<img src="imges/mypicture1.png" title="我的图片1" />
</a>
<a href="javascript:;">
<img src="imges/mypicture2.png" title="我的图片2"/>
</a>
<a href="javascript:;">
<img src="imges/mypicture3.png" title="我的图片3"/>
</a>
<a href="javascript:;">
<img src="imges/mypicture4.png" title="我的图片4"/>
</a>
</div>
</div>
<script type="text/javascript" src="js/showPictures-inTurn.js"></script>
</body>
</html>
css文件
body *{
margin:0;
padding:0;
}
#show-pictures-in-turn .banner{
width:500px;
height:400px;
position:relative;
border:1px solid #000;
}
#show-pictures-in-turn a.banner_title{
position:absolute;
top:370px;
left:20px;
color:#fff;
font-size:17px;
text-decoration:none;
z-index:2;
}
#show-pictures-in-turn ul{
width:104px;
height:20px;
position:absolute;
top:350px;
right:20px;
z-index:2;
list-style: none;
}
#show-pictures-in-turn ul li{
float:left;
width:10px;
_width:5px;
height:20px;
line-height:20px;
display: inline;
margin:1px;
font-size: 14px;
text-align: center;
background-color:#6f4f67;
color:#fff;
padding:0px 6px;
border:1px solid #fff;
cursor:pointer;
}
#show-pictures-in-turn ul li.active{
background-color:#900;
}
#show-pictures-in-turn .banner_pic a{
position:absolute;
top:0;
left:0;
}
js文件
$(function(){
//页面初始化
$('.banner_pic img:eq(0)').css('opacity', '1');
$('.banner_pic img:gt(0)').css('opacity', '0');
$('.banner_list li:eq(0)').addClass('active');
var title=$('.banner_pic img:eq(0)').attr('title');
$('.banner_title').text(title);
//图片逐渐消失
var disappear=function(elem){
var opacity=100;
for(var i=0;i<=10;i++){
opacity=100-i*10;
elem.css('opacity', opacity);
}
return false;
};
//图片逐渐显现
var appear=function(elem){
var opacity=0;
for(var i=0;i<=10;i++){
opacity+=i*10;
elem.css('opacity', opacity);
}
return false;
};
var flag=false;
//自动轮播
function auto_play(pic_num_current,pic_num_last){
function process(){
if(pic_num_current==0&&!flag){
pic_num_current=1;
return;
}
flag=true;
disappear($('.banner_pic img:eq('+pic_num_last+')'));
appear($('.banner_pic img:eq('+pic_num_current+')'));
$('.banner_list li').removeClass('active');
$('.banner_list li:eq('+(pic_num_current)+')').addClass('active');
var title=$('.banner_pic img:eq('+(pic_num_current)+')').attr('title');
$('.banner_title').text(title);
if(pic_num_current!=3){
pic_num_last=pic_num_current;
pic_num_current=pic_num_current+1;
}
else{
pic_num_last=pic_num_current;
pic_num_current=0;
}
}
return process;
}
var result=auto_play(0,0);
var circulate=setInterval(result,3000);
$('ul.banner_list li').click(function() {
clearInterval(circulate);
flag=true;
var currrent_num=$(this).text()-1;
var last_num=$('li.active').text()-1;
result=auto_play(currrent_num,last_num);
result();
circulate=setInterval(result,3000);
});
});

...全文