63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
|
var p = $('#picplayer');
|
||
|
|
var pics1 = [{url:'images/minBanner-1.png',link:'#',time:3000},{url:'images/minBanner-2.jpg',link:'',time:3000},{url:'images/minBanner-3.jpg',link:'',time:3000},{url:'images/minBanner-4.jpg',link:'',time:3000}];
|
||
|
|
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');
|
||
|
|
var c = $('#piccontent');
|
||
|
|
|
||
|
|
for(var i=0; i<pics.length; i++){
|
||
|
|
//添加图片到容器中
|
||
|
|
c.append('<a target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');
|
||
|
|
// href="'+pics[i].link+'"
|
||
|
|
}
|
||
|
|
|
||
|
|
//按钮容器，绝对定位在右下角
|
||
|
|
var btnHolder = $('#picbtnHolder');
|
||
|
|
var btns = $('#picbtns');
|
||
|
|
|
||
|
|
for(var i=0; i<pics.length; i++){
|
||
|
|
//增加图片对应的按钮
|
||
|
|
$('#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'));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
setSelectedItem(0);
|
||
|
|
|
||
|
|
//显示指定的图片index
|
||
|
|
function setSelectedItem(index){
|
||
|
|
selectedIndex = index;
|
||
|
|
clearInterval(playID);
|
||
|
|
if(selectedItem)selectedItem.fadeOut('fast');
|
||
|
|
selectedItem = $('#picitem'+index);
|
||
|
|
selectedItem.fadeIn('slow');
|
||
|
|
//
|
||
|
|
if(selectedBtn){
|
||
|
|
selectedBtn.children('span').css('backgroundColor','#D8D8D8');
|
||
|
|
// selectedBtn.css('color','#000');
|
||
|
|
}
|
||
|
|
selectedBtn = $('#picbtn'+index);
|
||
|
|
selectedBtn.children('span').css('backgroundColor','#485766');
|
||
|
|
// selectedBtn.css('color','#fff');
|
||
|
|
//自动播放
|
||
|
|
playID = setInterval(function(){
|
||
|
|
var index = selectedIndex+1;
|
||
|
|
if(index > pics.length-1)index=0;
|
||
|
|
setSelectedItem(index);
|
||
|
|
},pics[index].time);
|
||
|
|
}
|
||
|
|
}
|