|
|
/*
|
|
|
*精品酒店页面图片切换效果
|
|
|
* 此效果需要在指定目录下放置图片，在调用页面上有 hotelid这个值.否则无法使用
|
|
|
*/
|
|
|
$(function() {
|
|
|
function beginPlayImg(){
|
|
|
var sWidth = $("#Info_image_px .px_image").width(); //获取焦点图的宽度（显示面积）
|
|
|
var len = $("#Info_image_px .px_image>ul>li").length; //获取焦点图个数
|
|
|
var index = 0;
|
|
|
var picTimer;
|
|
|
//显示图片
|
|
|
showPics(0);
|
|
|
|
|
|
//上一页按钮
|
|
|
$("#Info_image_px .px_prev").click(function() {
|
|
|
index -= 1;
|
|
|
if(index == -1) {index = len - 1;}
|
|
|
showPics2(index,'Up');return false;
|
|
|
});
|
|
|
|
|
|
//下一页按钮
|
|
|
$("#Info_image_px .px_next").click(function() {
|
|
|
index += 1;
|
|
|
if(index == len) {index = 0;}
|
|
|
showPics2(index,'Down');return false;
|
|
|
});
|
|
|
|
|
|
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
|
|
|
$("#Info_image_px ul").css("width",sWidth * (len));
|
|
|
|
|
|
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
|
|
|
$("#Info_image_px").hover(function() {
|
|
|
clearInterval(picTimer);
|
|
|
},function() {
|
|
|
picTimer = setInterval(function() {
|
|
|
showPics2(index,'Down');
|
|
|
index++;
|
|
|
if(index == len) {index = 0;}
|
|
|
},4000); //此4000代表自动播放的间隔，单位：毫秒
|
|
|
}).trigger("mouseleave");
|
|
|
|
|
|
function showPics(index) { //普通切换
|
|
|
var nowLeft = -index*sWidth;
|
|
|
var h=index;
|
|
|
var showObj = $("#Info_image_px .px_image>ul>li");
|
|
|
$("#Info_image_px ul").stop(true,false).animate({"left":nowLeft},300);//移动换
|
|
|
$("#Info_image_px .px_page").html((index+1) + ' / ' + len);
|
|
|
$("#Info_image_px .px_describ").html(showObj.eq(index).find('img').attr('title'));
|
|
|
}
|
|
|
function showPics2(index,direction){
|
|
|
if(direction == "Down"){
|
|
|
Obj = $("#Info_image_px .px_image>ul>li:first").fadeTo(0.1, 0);
|
|
|
setTimeout('Obj.appendTo("#Info_image_px .px_image>ul").fadeTo("slow", 1)',100);
|
|
|
showObj = Obj;
|
|
|
}else{
|
|
|
Obj = $("#Info_image_px .px_image>ul>li:last").fadeTo(1000, 0);
|
|
|
setTimeout('Obj.prependTo("#Info_image_px .px_image>ul").fadeTo("slow", 1)',1000);
|
|
|
showObj = Obj.prev();
|
|
|
|
|
|
}
|
|
|
$("#Info_image_px .px_page").html((index+1) + ' / ' + len);
|
|
|
$("#Info_image_px .px_describ").html(showObj.find('img').attr('title'));
|
|
|
}
|
|
|
}
|
|
|
if(typeof beginPlayImg == 'function'){
|
|
|
beginPlayImg();
|
|
|
}
|
|
|
}); |