67 lines
2.2 KiB
JavaScript
67 lines
2.2 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);
|
|
}
|
|
} |