html焦点图自动播放纯代码,jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)...

demo01.html

手动滚动图片

ul,li{margin:0;padding:0}

img{border:0px;}

#container{padding:40px;}

#showArea img{width:700px;}

a{text-decoration:none;border:0px;}

#scrollDiv{border:#ccc 1px solid;}

#scrollDiv li{background:#A83;}

$(document).ready(function(){

$.imgfocus({

objId:"scrollDiv",

showTitle: true,

height:210,

width:280,

speed:1000

});

});

• 
• 
• 
• 
• 
• 

imgfocus-0.1.0.js

/**

* 手动滚动图片

*

**/

$.extend({

imgfocus: function(opt, callback) {

//alert("suc");

this.defaults = {

// 滚动区域id

objId: "",

// 是否在大图下方显示标题

showTitle: false,

// 每行的宽度

width: 300,

// div的高度

height: 100,

// 每次滚动的行数

line: 1,

// 自动滚动的行数

autoLine: 1,

// 动作时间

speed: 0,

// 滚动间隔

interval: 3000,

// 图片根目录

imgPath: "",

// 间隔句柄，不需要设置，只是作为标识使用

picTimer: 0,

// 按钮透明度

opacity: 0.3

};

//参数初始化

var opts = $.extend(this.defaults, opt);

// 定义外层元素样式

$("#" + opts.objId).css({

"position": "relative",

"overflow": "hidden",

"width": (opts.line * opts.width) + "px"

});

// 定义ul样式

$("#" + opts.objId + " ul").css({

"width": opts.width * $("#" + opts.objId + " ul").find("li").size() + "px",

"height": opts.height + "px"

});

// 定义li样式

$("#" + opts.objId + " ul li").css({

"display": "block",

"float": "left",

"width": opts.width + "px",

"height": opts.height + "px"

});

// 定义img样式

$("#" + opts.objId + " ul li img:first").css({

"display": "block",

"float": "left",

"width": opts.width + "px",

"height": opts.height + "px"

});

if (opts.showTitle) {

$("#" + opts.objId).append("

$("#imgfocus_banner").css({

"width": opts.width + "px",

"height": "20px",

"background": "#333",

"position": "absolute",

opacity: 0.7,

"text-align": "center",

"color": "#FFF",

"left": "0px",

"top": (opts.height - 20) + "px"

});

$("#imgfocus_banner").html("

$("#imgfocus_banner_title").text("text");

$("#imgfocus_banner_title").css({

"display": "block",

"float": "left",

"width": (opts.width - 20 * $("#" + opts.objId + " ul li").size()) + "px",

"height": "20px"

});

$("#" + opts.objId + " ul li").each(function(index) {

$(this).attr("index", index);

$("#imgfocus_banner").append("

" + (index + 1) + "

");

var bgColor;

$("#imgfocus_banner_squ" + index).mouseover(function() {

bgColor = $(this).css("background");

$(this).css({

"background": "#CC0"

});

}).mouseleave(function() {

$(this).css({

"background": bgColor

});

});

// 数字块点击事件

$("#imgfocus_banner_squ" + index).click(function() {

var length = $("#" + opts.objId + " ul li[index=" + index + "]").prevAll().size();

var scrollWidth = 0 - length * opts.width - (0 - $("#" + opts.objId).find("ul:first").css("margin-left").replace("px", ""));

$("#" + opts.objId).find("ul:first").animate({

marginLeft: scrollWidth

},

6,

function() {

for (i = 1; i <= length; i++) {

$("#" + opts.objId).find("li:first").appendTo($("#" + opts.objId).find("ul:first"));

}

$("#" + opts.objId).find("ul:first").css({

marginLeft: 0

});

var index = $("#" + opts.objId).find("li:first").attr("index");

// 数字标签全部变灰色

$(".imgfocus_banner_squ").css({

"background": "#CCC"

});

// 活动的数字标签变红色

$("#imgfocus_banner_squ" + index).css({

"background": "#C00"

});

bgColor = "background:#C00";

changeTitle();

});

});

});

// 数字块样式

$(".imgfocus_banner_squ").css({

"display": "block",

"float": "left",

"margin": "1px",

"width": "18px",

"height": "18px",

"color": "#000",

"background": "#CCC"

});

// 第一个数字块样式

$(".imgfocus_banner_squ:first").css({

"background": "#C00"

});

}

/**

* 自动横向滚动

*/

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

});

var index = $("#" + opts.objId).find("li:first").attr("index");

changeTitle();

// 数字标签全部变灰色

$(".imgfocus_banner_squ").css({

"background": "#CCC"

});

// 活动的数字标签变红色

$("#imgfocus_banner_squ" + index).css({

"background": "#C00"

});

});

};

/**

* 切换标题

*/

function changeTitle(){

$("#imgfocus_banner_title").text($("#" + opts.objId).find("li:first img:first").attr("alt"));

}

/**

* 鼠标滑上后显示按钮

*/

$("#" + opts.objId).hover(function() {

$("#button_left").css({

opacity: 1

});

$("#button_right").css({

opacity: 1

});

},

function() {

$("#button_left").css({

opacity: opts.opacity

});

$("#button_right").css({

opacity: opts.opacity

});

}).trigger("mouseleave");

/**

* 最先执行的函数

* 鼠标滑上焦点图时停止自动播放，滑出时开始自动播放

*/

// 初始化标题

changeTitle();

$("#" + opts.objId).hover(function() {

clearInterval(opts.picTimer);

},

function() {

opts.picTimer = setInterval(function() {

scrollLeft();

},

opts.interval); // 自动播放的间隔，单位：毫秒

}).trigger("mouseleave");

}

});