图片轮播的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>