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


Posted in Javascript onJanuary 24, 2013

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"); 
} 
});
Javascript 相关文章推荐
JQuery for与each性能比较分析
May 14 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
layui use 定义js外部引用函数的方法
Sep 26 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 #Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 #Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 #Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 #Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 #Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 #Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 #Javascript
You might like
德劲1102收音机的打理维修案例
2021/03/02 无线电
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
angular.bind使用心得
2015/10/26 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python如何将函数值赋给变量
2020/04/28 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
积极分子思想汇报
2014/01/04 职场文书
美发活动策划书
2014/01/14 职场文书
土地转让协议书
2014/04/15 职场文书
工程承包协议书
2014/10/20 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
刘公岛导游词
2015/02/05 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电