jquery做出缩略图关联图片切换功能
程序员文章站
2022-04-06 18:35:39
...
这次给大家带来jquery做出缩略图关联图片切换功能,jquery做出缩略图关联图片切换功能的注意事项有哪些,下面就是实战案例,一起来看一下。
<!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;} #scrollp{border:#ccc 1px solid;} #scrollp 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:"scrollp", showArea:"showArea", showTitle: true, height:105, width:140, line:5, speed:1000 }); }); </script> </head> <body> <p id="container"> <p id="showArea"></p> <p id="scrollp"> <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> </p> </p> </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, // p的高度 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("<p id=\"button_left\"></p>"); // 定义向左按钮的位置 $("#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("<p id=\"button_right\"></p>"); // 定义向右按钮的位置 $("#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("<p id=\"manualScroll_banner\" ></p>"); $("#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做出缩略图关联图片切换功能的详细内容,更多请关注其它相关文章!
上一篇: flex布局详解
下一篇: img的onload的另类用法_图象特效