html图片轮播速度,利用jquery实现图片轮播效果（可配置每张图片的停留时间）...

pic player

http://img.jb51.net/jslib/jquery/jquery-1.2.6.js">

http://img.jb51.net/jslib/jquery/tween.js">

img{border:0;}

there is a pic-player

var p = $('#Div55');

var nodid;

var pics1 = [{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net/#',time:10000,text:'第一张图片',content:'第一个内容'},

{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net/#',time:3000,text:'第二张图片',content:'第二个内容'},

{url:'http://img.jb51.net/online/picPlayer/3.jpg',link:'http://www.jb51.net',time:3000,text:'第三张图片',content:'第三个内容'},

{url:'http://img.jb51.net/online/picPlayer/2.jpg',link:'http://www.jb51.net',time:3000,text:'第四张图片',content:'第四个内容'},

{url:'http://img.jb51.net/online/picPlayer/1.jpg',link:'http://www.jb51.net',time:3000,text:'第五张图片',content:'第五个内容'}];

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('

var c = $('#piccontent');

for(var i=0;i

{

//添加图片到容器中

c.append('');

}

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

p.append('

var btnHolder = $('#picbtnHolder');

btnHolder.append('

var btns = $('#picbtns');

//

var e=$('#Div4');

e.text(" ");

var d=$('#Div3');

d.text(" ");

for(var i=0;i

{

//增加图片对应的按钮

btns.append(' '+(i+1)+' ');

$('#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;

//给e添加内容

for(var i=0;i

e.text(pics1[index].text);

d.text(pics1[index].content);

}

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); } }