最新消息:红方科技年末特惠:.com域名55元、云虚机五折优惠,买3年送2年,更有智能建站套餐等你来取!

JS图片仿幻灯左右浏览图片

JS yinhexi 2039浏览 0评论

<div class=’pricecatalog‘>
<img src=”/uploadfile/1345218121.jpg” alt=”" />
<img src=”/uploadfile/1345218121.jpg” alt=”" />
</div>

if($('.pricecatalog').length>0) {
var picList = new Array();
var i = 0;
var m = 0;
$('.pricecatalog').find('img').each(function(){
picList[m] = $(this).attr('src');
m++;
});
$('.pricecatalog').replaceWith("<span class='pic'><img src='"+picList[0]+"'><small></small></span>");
if($('.pic').find('img').width()>680) {$('.pic').find('img').css('width','680px');}

$('.pic').find('img').live('mousemove',function(e){
var img_middle = $(this).offset().left+parseInt($(this).width()/2);
if(e.pageX > img_middle) {
$('.pic').find('small').css({
'left':'660px',
'top':e.pageY-$(this).offset().top
});
$('.pic').find('small').removeClass();
$('.pic').find('small').addClass('current_right');
$('.pic').find('small').attr('title','下一张');
} else {
$('.pic').find('small').css({
'left':'5px',
'top':e.pageY-$(this).offset().top
});
$('.pic').find('small').removeClass();
$('.pic').find('small').addClass('current_left');
$('.pic').find('small').attr('title','上一张');
}
$('.pic').find('small').show();
});
$('.pic').find('small').live('click',function(){
if($(this).hasClass('current_left')) {
if(i==0) {
alert('当前为第一张图片');
return false;
} else {
i--;
$('.pic').find('img').attr('src',picList[i]);
}
} else {
if(i==picList.length-1) {
alert('当前为最后一张图片');
return false;
} else {
i++;
$('.pic').find('img').attr('src',picList[i]);
}
}
});
}

转载请注明:红方博客 » JS图片仿幻灯左右浏览图片