js图片轮播

淩亂°似流年 2024-02-17 20:14 12阅读 0赞

js图片轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>pic player</title>

</head>

img\{border:0;\}

</style>

<body>

there is a pic-player

</div>

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)