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 浮动广告实现代码
Dec 25 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
JavaScript验证知识整理
Mar 24 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 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中文字符截取防乱码
2008/03/28 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
公务员培训自我鉴定
2014/02/01 职场文书
小学课外阅读总结
2014/07/09 职场文书
会议通知
2015/04/15 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
走进科学观后感
2015/06/18 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS