java轮播添加图片_js实现图片轮播

pic player

>

>

there is a pic-player

var p = $('#picplayer');

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

p.text('');

p.append('

var c = $('#piccontent');

for(var i=0;i

{

//添加图片到容器中

c.append(' .link+'" target="_blank">'); 

}

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

p.append('

//

var btnHolder = $('#picbtnHolder');

btnHolder.append('

var btns = $('#picbtns');

//

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;

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

}

}