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 相关文章推荐
Js+Flash实现访问剪切板操作
Nov 20 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
Javascript中神奇的this
Jan 20 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
js实现选项卡效果
Mar 07 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
django session完成状态保持的方法
2018/11/27 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
jupyter 添加不同内核的操作
2021/02/06 Python
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
应届生污水处理求职信
2013/11/06 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
医学生自我评价
2014/01/27 职场文书
村庄绿化方案
2014/05/07 职场文书
个人工作总结范文2014
2014/11/07 职场文书
晚会开幕词范文
2016/03/04 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript