jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

187 阅读 0 评论 124 点赞

我是靠谱客的博主冷酷外套，最近开发中收集的这篇文章主要介绍jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

demo01.html

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>手动滚动图片</title> 
<style type="text/css"> 
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;} 
</style> 
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="imgfocus-0.1.0.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

$.imgfocus({ 
objId:"scrollDiv", 
showTitle: true, 
height:210, 
width:280, 
speed:1000 
}); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
<div id="scrollDiv"> 
<ul> 
<li><a href="#"><img src="images/1.jpg" alt="images/1.jpg" width="280"/></a></li> 
<li><a href="#"><img src="images/2.jpg" alt="images/2.jpg" width="280"/></a></li> 
<li><a href="#"><img src="images/3.jpg" alt="images/3.jpg" width="280"/></a></li> 
<li><a href="#"><img src="images/4.jpg" alt="images/4.jpg" width="280"/></a></li> 
<li><a href="#"><img src="images/5.jpg" alt="images/5.jpg" width="280"/></a></li> 
<li><a href="#"><img src="images/6.jpg" alt="images/6.jpg" width="280"/></a></li> 
</ul> 
</div> 
</div> 
</body> 
</html> 

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("<div id="imgfocus_banner" />"); 
$("#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("<div id="imgfocus_banner_title" />"); 
$("#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("<div id="imgfocus_banner_squ" + index + "" class="imgfocus_banner_squ" >" + (index + 1) + "</div>"); 
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"); 
} 
}); 