首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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"); 
} 
});

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
Stop SQL Server
Jun 21 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 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
Slave(1) 骨架屏(1) 横向滚动(1) caddy(1) ESXI(1) 共享文件夹(1) NginxConfig(1) Master(1) SVN(1) 表约束(2)
You might like
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
php实现微信支付之退款功能
2018/05/30 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python 类属性与实例属性，类对象与实例对象用法分析
2019/09/20 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
python3中布局背景颜色代码分析
2020/12/01 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
WEB控件可以激发服务端事件，请谈谈服务端事件是怎么发生并解释其原理？自动传回是什么？为什么要使用自动传回？
2012/02/21 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
拓展训练激励口号
2014/06/17 职场文书
教室标语大全
2014/06/21 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
Python实现信息管理系统
2022/06/05 Python