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

た入场券 2022-10-06 10:53 91阅读 0赞

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('![%5C'\#%5C'%22][5C_5C_22]');

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

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

[5C_5C_22]: