图片轮播的JS写法，通用涉及多个轮播
本代码是借鉴大神的代码分析理解后，自己改写的！有不足指出希望给为大神指点。
核心只有一个JS，里面包含了css样式。
展示效果图：
首先是需要轮播的jsp的代码
<div id="lImages" class="slideBox" style="width:100%;height:100%;"> <ul class="items"> <c:forEach var="listImages" items="${listImages}" varStatus="status"> <c:forEach var="imgItem" items="${fn:split(listImages.images,';')}" varStatus="status3"> <li id="obj"> <a href="javascript:void(0)" onclick="window.open('statistics.shtml?act=getDetails&typeKey=${listImages.typeKey}&id=${listImages.id}')" title="${listImages.title }"> <img src="${imgItem }" style="width:100%;height:100%;"/></a> </li> </c:forEach> </c:forEach> </ul> </div>
<div id="rImages" class="slideBox" style="width:100%;height:250px;"> <ul class="items"> <li><a href="javascript:void(0)" onclick="window.open('/images/wangge/dangjian/dzzjgt.jpg')" title="测试1"><img width="100%" height="100%" src="/images/wangge/dangjian/dzzjgt.jpg"/></a></li> <li><a href="javascript:void(0)" onclick="window.open('/images/wangge/dangjian/sqdwcyjgt.jpg')" title="测试2"><img width="100%" height="100%" src="/images/wangge/dangjian/sqdwcyjgt.jpg"/></a></li> <li><a href="javascript:void(0)" onclick="window.open('/images/wangge/dangjian/sqlhdwcyjgt.jpg')" title="测试3"><img width="100%" height="100%" src="/images/wangge/dangjian/sqlhdwcyjgt.jpg"/></a></li> </ul> </div>
核心东西来了！
/** * 手动滚动图片 * **/ $.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_"+opts.objId+"\" />"); $("#imgfocus_banner_"+opts.objId+"").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_"+opts.objId+"").html("<div id=\"imgfocus_banner_title_"+opts.objId+"\" />"); $("#imgfocus_banner_title_"+opts.objId+"").text("text"); $("#imgfocus_banner_title_"+opts.objId+"").css({ "width": "280px", "height": "25px", "font-size":"15px", "position": "absolute", "opacity": "0.7", "text-align": "center", "color": "rgb(255, 255, 255)", "left": "0px", "top": "-230px", "background": "rgb(51, 51, 51)", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis" }); $("#" + opts.objId + " ul li").each(function(index) { $(this).attr("index", index); $("#imgfocus_banner_"+opts.objId+"").append("<div id=\"imgfocus_banner_squ_"+ opts.objId + index +"\" class=\"imgfocus_banner_squ"+ opts.objId +"\" >" + (index + 1) + "</div>"); var bgColor; $("#imgfocus_banner_squ_"+ opts.objId + index +"").mouseover(function() { bgColor = $(this).css("background"); $(this).css({ "background": "#CC0" }); }).mouseleave(function() { $(this).css({ "background": bgColor }); }); // 数字块点击事件 $("#imgfocus_banner_squ_"+ opts.objId + 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"+ opts.objId +"").css({ "background": "#CCC" }); // 活动的数字标签变红色 $("#imgfocus_banner_squ_"+ opts.objId + index +"").css({ "background": "#C00" }); bgColor = "background:#C00"; changeTitle(); }); }); }); // 数字块样式 $(".imgfocus_banner_squ"+ opts.objId +"").css({ "display": "block", "float": "left", "margin": "1px", "width": "18px", "height": "20px", "color": "#000", "background": "#CCC" }); // 第一个数字块样式 $("#imgfocus_banner_squ_"+ opts.objId +"0").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"+ opts.objId +"").css({ "background": "#CCC" }); // 活动的数字标签变红色 $("#imgfocus_banner_squ_"+ opts.objId + index +"").css({ "background": "#C00" }); } ); }; /** * 切换标题 */ function changeTitle(){ $("#imgfocus_banner_title_"+opts.objId+"").text($("#" + opts.objId).find("li:first a:first").attr("title")); } /** * 鼠标滑上后显示按钮 */ $("#" + 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"); } });
jsp中调用
<script type="text/javascript"> $(document).ready(function(){ $.imgfocus({ objId:"lImages", showTitle: true, height:250, width:280, speed:1000 }); $.imgfocus({ objId:"rImages", showTitle: true, height:250, width:280, speed:1000 }); }); </script>