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

　　推荐阅读

　　编写针对IE的JS代码两种编写方法

有些时候我们需要针对某些IE下的兼容性写单独的JS处理代码。有多种做法： 1.通过检测navigation.userAgent来判断是否是IE，再编写IE分支的处理代码： 2.通过声明@cc_on 语句可以在脚本的注释内启用条件编译功能，这>>>详细阅读

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

地址：http://www.17bianji.com/kaifa2/JS/22413.html

1/2 1