js图片轮播

js图片轮播

<!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>pic player</title>

 

<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script>

 

<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script>

 

</head>

 

<style type="text/css">

 

img{border:0;}

 

</style>

 

<body>

 

<div id="d1" style="background-color: #6600FF">a</div>

 

<div id="Div1" style="background-color: #ffffff">b</div>

 

<div id="Div2" style="background-color: #6600FF">c</div>

 

<div id="Div55" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;">

 

there is a pic-player

 

</div>

 

<div id="Div3" style="background-color: #ffffff">d</div>

 

<div id="Div4" style="background-color: #6600FF">e</div>

 

<script>

 

var p = $('#Div55');

 

var pics1 = [{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:5000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:4000},{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:6000},{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:6000}];

 

initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]);

 

//

 

//

 

function initPicPlayer(pics,w,h)

 

{

 

//选中的图片

 

var selectedItem;

 

//选中的按钮

 

var selectedBtn;

 

//自动播放的id

 

var playID;

 

//选中图片的索引

 

var selectedIndex;

 

//容器

 

var p = $('#Div55');

 

p.text('');

 

p.append('<div id="piccontent"></div>');

 

var c = $('#piccontent');

 

for(var i=0;i<pics.length;i++)

 

{

 

//添加图片到容器中

 

c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');

 

}

 

//按钮容器,绝对定位在右下角

 

p.append('<div id="picbtnHolder" style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div>');

 

//

 

var btnHolder = $('#picbtnHolder');

 

btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>');

 

var btns = $('#picbtns');

 

//

 

for(var i=0;i<pics.length;i++)

 

{

 

//增加图片对应的按钮

 

btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> ');

 

$('#picbtn'+i).data('index',i);

 

$('#picbtn'+i).click(

 

function(event)

 

{

 

if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src'))

 

{

 

return;

 

}

 

setSelectedItem($(this).data('index'));

 

}

 

);

 

}

 

btns.append(' ');

 

///

 

setSelectedItem(0);

 

//显示指定的图片index

 

function setSelectedItem(index)

 

{

 

selectedIndex = index;

 

clearInterval(playID);

 

//alert(index);

 

if(selectedItem)selectedItem.fadeOut('fast');

 

selectedItem = $('#picitem'+index);

 

selectedItem.fadeIn('slow');

 

//

 

if(selectedBtn)

 

{

 

selectedBtn.css('backgroundColor','#eee');

 

selectedBtn.css('color','#000');

 

}

 

selectedBtn = $('#picbtn'+index);

 

selectedBtn.css('backgroundColor','#000');

 

selectedBtn.css('color','#fff');

 

//自动播放

 

playID = setInterval(function()

 

{

 

var index = selectedIndex+1;

 

if(index > pics.length-1)index=0;

 

setSelectedItem(index);

 

},pics[index].time);

 

}

 

}

 

</script>

 

</body>

 

</html>

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值