jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

2020-05-22 17:13:18易采站长站整理

}
$(“#”+opts.objId).find(“ul:first”).css({marginLeft:0});
showArea();
});
});
// 向右按钮添加动作
$(“#button_right”).click(function(){
var scrollWidth = (0 – opts.line*opts.width + (0 – $(“#”+opts.objId).find(“ul:first”).css(“margin-left”).replace(“px”,””)));
// 无间断滚动
$(“#”+opts.objId).find(“ul:first”).animate({
marginLeft:scrollWidth
},0,function(){
for(i=1;i<=opts.line;i++){
$(“#”+opts.objId).find(“li:last”).prependTo($(“#”+opts.objId).find(“ul:first”));
}
$(“#”+opts.objId).find(“ul:first”).animate({
marginLeft:0
},opts.speed,function(){
$(“#”+opts.objId).find(“ul:first”).css({marginLeft:0});
showArea();
});
});
});
/**
* 自动横向滚动
*/
function scrollLeft(){
var scrollWidth = 0 – opts.autoLine * opts.width – (0 – $(“#”+opts.objId).find(“ul:first”).css(“margin-left”).replace(“px”,””));
$(“#”+opts.objId).find(“ul:first”).animate({
marginLeft:scrollWidth
},opts.speed,function(){
for(i=1;i<=opts.autoLine;i++){
$(“#”+opts.objId).find(“li:first”).appendTo($(“#”+opts.objId).find(“ul:first”));
}
$(“#”+opts.objId).find(“ul:first”).css({marginLeft:0});
showArea();
});
};
/**
* 大图下方显示标题
*/
if(opts.showTitle && $(“#”+opts.showArea).size() > 0){
$(“#”+opts.showArea).css({
“width”:opts.showWidth + “px”,
“position”:”relative”,
“height”:opts.showHeight + “px”
});
$(“#”+opts.showArea).html(“<img />”);
$(“#”+opts.showArea).append(“<div id=”manualScroll_banner” ></div>”);
$(“#manualScroll_banner”).css({
“width”:opts.showWidth + “px”,
“height”:”20px”,
“background”:”#333″,
“position”:”absolute”,
opacity:0.7,
“text-align”:”center”,
“color”:”#FFF”,
“left”:”0px”,
“top”:(opts.showHeight – 20) + “px”
});
}
/**
* 在指定区域显示大图
*/
function showArea(){
if($(“#”+opts.showArea).size() > 0){
// 显示主图的位置
var index = Math.floor((opts.line – 1) / 2);
showIndexArea(index);
// 鼠标划上后显示大图
$(“#”+opts.objId + ” ul li”).each(function(index){
$(this).mouseover(function(){