<strong>demo04.html</strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="4275" class="copybut" id="copybut4275" onclick="doCopy('code4275')"><u>复制代码</u></a></span>代码如下:</div> <div class="codebody" id="code4275"> <br><! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>手動滚動图片</title> <br><style type="text/css"> <br>ul,li{margin:0;padding:0} <br>img{border:0px;} <br>#container{padding:40px;} <br>#showArea img{width:700px;} <br>a{text-decoration:none;border:0px;} <br>#scrollDiv{border:#ccc 1px Solid;} <br>#scrollDiv li{background:#A83;} <br></style> <br><script src="../jquery-1.8.0.min.js" type="text/javascript"></script> <br><script src="manualScroll-0.1.4.js" type="text/javascript"></script> <br><script type="text/javascript"> <br>$(document).ready(function(){ <br><br>$.manualScroll({ <br>objId:"scrollDiv", <br>showArea:"showArea", <br>showTitle: true, <br>高さ:105、<br>幅:140、<br>行:5、<br>速度:1000 <br>}); <br>}); <br></script> <br></head> <br> <br><div id="コンテナ"> <br><div id="showArea"></div> <br><div id="scrollDiv"> <br><ul> <br><li><a href="#"><img src="images/1.jpg" alt="images/1.jpg" width="140"/></a> ;</li> <br><li><a href="#"><img src="images/2.jpg" alt="images/2.jpg" width="140"/></a> ;</li> <br><li><a href="#"><img src="images/3.jpg" alt="images/3.jpg" width="140"/></a> ;</li> <br><li><a href="#"><img src="images/4.jpg" alt="images/4.jpg" width="140"/></a> ;</li> <br><li><a href="#"><img src="images/5.jpg" alt="images/5.jpg" width="140"/></a> ;</li> <br><li><a href="#"><img src="images/6.jpg" alt="images/6.jpg" width="140"/></a> ;</li> <br> </ul> <br> </div> <br> <br></body> <br></html> <br> <br>manualScroll-0.1.4.js <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="95989" class="copybut" id="copybut95989" onclick="doCopy('code95989')"><u>复制代码</u></a></span>代码如下:</div> <div class="codebody" id="code95989"> <br>/** <br>* 手动滚动图片 <br>* <br>**/ <br>$.extend({ <br>manualScroll:function(opt,callback){ <br>//alert("suc"); <br>this.defaults = { <br>objId:"", // 滚动区域id <br>showArea:"", // 大图显示区域id,如果没有就不显示 <br>showWidth:700, // 大图宽度 <br>showHeight:525, // 大图高度 <br>showTitle: false, // 是否在大图下方显示标题 <br>width:300, // 每行的宽度 <br>height:100, // div的高度 <br>line:2, // 每次滚动的行数 <br>autoLine:1, // 自动滚动的行数 <br>speed:0, // 动作时间 <br>interval:3000, // 滚动间隔 <br>imgPath:"", // 图片根目录 <br>directBtn:"img/direct_btn02.png", // 指向图片 <br>picTimer:0, // 间隔句柄,不需要设置,只是作为标识使用 <br>opacity:0.3 // 按钮透明度 <br>}; <br><br>//参数初始化 <br>var opts = $.extend(this.defaults,opt); <br><br>// 定义外层元素样式 <br>$("#"+opts.objId).css({ <br>"position":"relative", <br>"overflow":"hidden", <br>"width":(opts.line * opts.width) + "px" <br>}); <br>// 定义ul样式 <br>$("#"+opts.objId + " ul").css({ <br>"width":opts.width * $("#"+opts.objId + " ul").find("li").size() + "px", <br>"height":opts.height + "px" <br>}); <br><br>// 定义li样式 <br>$("#"+opts.objId + " ul li").css({ <br>"display":"block", <br>"float":"left", <br>"width":opts.width + "px", <br>"height":opts.height + "px" <br>}); <br><br>// 添加向左滚动按钮 <br>$("#"+opts.objId).append("<div id=\"button_left\"></div>"); <br><br>// 定义向左按钮的位置 <br>$("#button_left").css({ <br>"width":"40px", <br>"height":"40px", <br>"background":"url(" + opts.imgPath + opts.directBtn + ")", <br>"background-position":"0px 0px", <br>"position":"absolute", <br>"left":"0px", <br>"top":(opts.height/2 - 20) + "px" <br>}); <br><br>// 添加向右滚动按钮 <br>$("#"+opts.objId).append("<div id=\"button_right\"></div>"); <br><br>// 定义向右按钮的位置 <br>$("#button_right").css({ <br>"width":"40px", <br>"height":"40px", <br>"background":"url(" + opts.imgPath + opts.directBtn + ")", <br>"background-position":"-40px 0px", <br>"position":"absolute", <br>"left":(opts.line * opts.width - 40) + "px", <br>"top":(opts.height/2 - 20) + "px" <br>}); <br><br>// 向左按钮添加动作 <br>$("#button_left").click(function(){ <br>var scrollWidth = 0 - opts.line * opts.width - (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px","")); <br>// 无间断滚动 <br>$("#"+opts.objId).find("ul:first").animate({ <br>marginLeft:scrollWidth <br>},opts.speed,function(){ <br>for(i=1;i<=opts.line;i++){ <BR>$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); <BR>} <BR>$("#"+opts.objId).find("ul:first").css({marginLeft:0}); <BR>showArea(); <BR>}); <BR>}); <br><br>// 向右按钮添加动作 <BR>$("#button_right").click(function(){ <BR>var scrollWidth = (0 - opts.line*opts.width + (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px",""))); <BR>// 无间断滚动 <BR>$("#"+opts.objId).find("ul:first").animate({ <BR>marginLeft:scrollWidth <BR>},0,function(){ <BR>for(i=1;i<=opts.line;i++){ <BR>$("#"+opts.objId).find("li:last").prependTo($("#"+opts.objId).find("ul:first")); <BR>} <BR>$("#"+opts.objId).find("ul:first").animate({ <BR>marginLeft:0 <BR>},opts.speed,function(){ <BR>$("#"+opts.objId).find("ul:first").css({marginLeft:0}); <BR>showArea(); <BR>}); <BR>}); <BR>}); <br><br>/** <BR>* 自动横向滚动 <BR>*/ <BR>function scrollLeft(){ <BR>var scrollWidth = 0 - opts.autoLine * opts.width - (0 - $("#"+opts.objId).find("ul:first").css("margin-left").replace("px","")); <BR>$("#"+opts.objId).find("ul:first").animate({ <BR>marginLeft:scrollWidth <BR>},opts.speed,function(){ <BR>for(i=1;i<=opts.autoLine;i++){ <BR>$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); <BR>} <BR>$("#"+opts.objId).find("ul:first").css({marginLeft:0}); <BR>showArea(); <BR>}); <BR>}; <br><br>/** <BR>* 大图下方显示标题 <BR>*/ <BR>if(opts.showTitle && $("#"+opts.showArea).size() > 0){ <br>$("#"+opts.showArea).css({ <br>"width":opts.showWidth + "px", <br>"position":"relative", <br>"height":opts.showHeight + "px" <br>}); <br>$("#"+opts.showArea).html("<img />"); <br>$("#"+opts.showArea).append("<div id=\"manualScroll_banner\" ></div>"); <br>$("#manualScroll_banner").css({ <br>"width":opts.showWidth "px", <br>"height":"20px", <br>"background": "#333", <br>"position":"absolute", <br>opacity:0.7, <br>"text-align":"center", <br>"color":"#FFF", <br>"left":"0px", <br>"top":(opts.showHeight - 20) "px" <br>}); <br>} <br><br>/**<br>* Display large image in designated area <br>*/ <br>function showArea(){ <br>if($("#" opts.showArea).size() > 0){ <br>// Display the position of the main image <br>var index = Math.floor ((opts.line - 1) / 2); <br>showIndexArea(index); <br>// Click the mouse to display the large image <br>$("#" opts.objId " ul li").each (function(index){ <br>$(this).mouseover(function(){ <br>showIndexArea(index); <br>}); <br>}); <br>} <br>} <br><br>/**<br>* Display a large image of the specified element <br>*/ <br>function showIndexArea(index){ <br>var imgSrc = $("#" opts.objId " ul li:eq(" index ") img:first") .attr("src"); <br>var imgAlt = $("#" opts.objId " ul li:eq(" index ") img:first").attr("alt"); <br>// Fade the remaining images <br>$("#" opts.objId " ul li:lt(" index ")").css({ <br>opacity:0.5 <br>}); <br>$("# " opts.objId " ul li:gt(" index ")").css({ <br>opacity:0.5 <br>}); <br>$("#" opts.objId " ul li:eq(" index ")").css({ <br>opacity:1 <br>}); <br>// Show large image<br>$("#" opts.showArea " img:first").attr(" src", imgSrc); <br>//Show title<br>if(opts.showTitle){ <br>$("#manualScroll_banner").text(imgAlt); <br>} <br>} <br> <br>/**<br>* Show the button after sliding the mouse over <br>*/ <br>$("#" opts.objId).hover(function() { <br>$("#button_left").css({ <br>opacity:1 <br>}); <br>$("#button_right").css({ <br>opacity:1 <br>}); <br>},function() { <br>$("#button_left" ).css({ <br>opacity:opts.opacity <br>}); <br>$("#button_right").css({ <br>opacity:opts.opacity <br>}); <br> }).trigger("mouseleave"); <br><br>/**<br>* The first function to be executed <br>* Stops automatic playback when the mouse slides over the focus image, and starts automatic playback when the mouse slides out <br>*/ <br>// Initialize the large image<br>showArea(); <br>$("#" opts.objId ).hover(function() { <br>clearInterval(opts.picTimer); <br>},function() { <br>opts.picTimer = setInterval(function() { <br>scrollLeft(); <br> },opts.interval); // Autoplay interval, unit: milliseconds <br>}).trigger("mouseleave"); <br>} <br>}); <br> </div>