Posted in Javascript onJanuary 23, 2013
demo04.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="manualScroll-0.1.4.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $.manualScroll({ objId:"scrollDiv", showArea:"showArea", showTitle: true, height:105, width:140, line:5, speed:1000 }); }); </script> </head> <body> <div id="container"> <div id="showArea"></div> <div id="scrollDiv"> <ul> <li><a href="#"><img src="images/1.jpg" alt="images/1.jpg" width="140"/></a></li> <li><a href="#"><img src="images/2.jpg" alt="images/2.jpg" width="140"/></a></li> <li><a href="#"><img src="images/3.jpg" alt="images/3.jpg" width="140"/></a></li> <li><a href="#"><img src="images/4.jpg" alt="images/4.jpg" width="140"/></a></li> <li><a href="#"><img src="images/5.jpg" alt="images/5.jpg" width="140"/></a></li> <li><a href="#"><img src="images/6.jpg" alt="images/6.jpg" width="140"/></a></li> </ul> </div> </div> </body> </html>
manualScroll-0.1.4.js
/** * 手动滚动图片 * **/ $.extend({ manualScroll:function(opt,callback){ //alert("suc"); this.defaults = { objId:"", // 滚动区域id showArea:"", // 大图显示区域id,如果没有就不显示 showWidth:700, // 大图宽度 showHeight:525, // 大图高度 showTitle: false, // 是否在大图下方显示标题 width:300, // 每行的宽度 height:100, // div的高度 line:2, // 每次滚动的行数 autoLine:1, // 自动滚动的行数 speed:0, // 动作时间 interval:3000, // 滚动间隔 imgPath:"", // 图片根目录 directBtn:"img/direct_btn02.png", // 指向图片 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" }); // 添加向左滚动按钮 $("#"+opts.objId).append("<div id=\"button_left\"></div>"); // 定义向左按钮的位置 $("#button_left").css({ "width":"40px", "height":"40px", "background":"url(" + opts.imgPath + opts.directBtn + ")", "background-position":"0px 0px", "position":"absolute", "left":"0px", "top":(opts.height/2 - 20) + "px" }); // 添加向右滚动按钮 $("#"+opts.objId).append("<div id=\"button_right\"></div>"); // 定义向右按钮的位置 $("#button_right").css({ "width":"40px", "height":"40px", "background":"url(" + opts.imgPath + opts.directBtn + ")", "background-position":"-40px 0px", "position":"absolute", "left":(opts.line * opts.width - 40) + "px", "top":(opts.height/2 - 20) + "px" }); // 向左按钮添加动作 $("#button_left").click(function(){ var scrollWidth = 0 - opts.line * 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.line;i++){ $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); } $("#"+opts.objId).find("ul:first").css({marginLeft:0}); showArea(); }); }); // 向右按钮添加动作 $("#button_right").click(function(){ var scrollWidth = (0 - opts.line*opts.width + (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px",""))); // 无间断滚动 $("#"+opts.objId).find("ul:first").animate({ marginLeft:scrollWidth },0,function(){ for(i=1;i<=opts.line;i++){ $("#"+opts.objId).find("li:last").prependTo($("#"+opts.objId).find("ul:first")); } $("#"+opts.objId).find("ul:first").animate({ marginLeft:0 },opts.speed,function(){ $("#"+opts.objId).find("ul:first").css({marginLeft:0}); showArea(); }); }); }); /** * 自动横向滚动 */ 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}); showArea(); }); }; /** * 大图下方显示标题 */ if(opts.showTitle && $("#"+opts.showArea).size() > 0){ $("#"+opts.showArea).css({ "width":opts.showWidth + "px", "position":"relative", "height":opts.showHeight + "px" }); $("#"+opts.showArea).html("<img />"); $("#"+opts.showArea).append("<div id=\"manualScroll_banner\" ></div>"); $("#manualScroll_banner").css({ "width":opts.showWidth + "px", "height":"20px", "background":"#333", "position":"absolute", opacity:0.7, "text-align":"center", "color":"#FFF", "left":"0px", "top":(opts.showHeight - 20) + "px" }); } /** * 在指定区域显示大图 */ function showArea(){ if($("#"+opts.showArea).size() > 0){ // 显示主图的位置 var index = Math.floor((opts.line - 1) / 2); showIndexArea(index); // 鼠标划上后显示大图 $("#"+opts.objId + " ul li").each(function(index){ $(this).mouseover(function(){ showIndexArea(index); }); }); } } /** * 显示指定元素的大图 */ function showIndexArea(index){ var imgSrc = $("#"+opts.objId + " ul li:eq(" + index + ") img:first").attr("src"); var imgAlt = $("#"+opts.objId + " ul li:eq(" + index + ") img:first").attr("alt"); // 淡化显示其余图片 $("#"+opts.objId + " ul li:lt(" + index + ")").css({ opacity:0.5 }); $("#"+opts.objId + " ul li:gt(" + index + ")").css({ opacity:0.5 }); $("#"+opts.objId + " ul li:eq(" + index + ")").css({ opacity:1 }); // 显示大图 $("#"+opts.showArea + " img:first").attr("src", imgSrc); // 显示标题 if(opts.showTitle){ $("#manualScroll_banner").text(imgAlt); } } /** * 鼠标滑上后显示按钮 */ $("#"+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"); /** * 最先执行的函数 * 鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 */ // 初始化大图 showArea(); $("#"+opts.objId).hover(function() { clearInterval(opts.picTimer); },function() { opts.picTimer = setInterval(function() { scrollLeft(); },opts.interval); // 自动播放的间隔,单位:毫秒 }).trigger("mouseleave"); } });
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@