JQuery图片滑动插件

效果预览：

(暂无)

html代码：

<div id="focus">
                <ul>
                    <li>
                        <a href="#"><img src="images/index2013/jdt.gif" /> </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/index2013/jdt.gif" /> </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/index2013/jdt.gif" /> </a>
                    </li>
                </ul>
            </div>

js代码：

<script type="text/javascript"
            src="http://lib.sinaapp.com/js/jquery/1.6/jquery.js "></script>
        <script type="text/javascript">
    $(document).ready(function() {
        slide();
    });
    function slide() {
        var focusDivName = "#focus";//焦点图所在div的id
        var sWidth = $(focusDivName).width(); // 获取焦点图的宽度（显示面积）
        var len = $(focusDivName + " ul li").length; // 获取焦点图个数
        var index = 0;
        var picTimer;

        // 以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
        var btn = "<div class='btnBg'></div><div class='btn'>";
        for ( var i = 0; i < len; i++) {
            btn += "<span></span>";
        }
        btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
        $(focusDivName).append(btn);
        $(focusDivName + " .btnBg").css("opacity", 0.0);

        // 为小按钮添加鼠标滑入事件，以显示相应的内容
        $(focusDivName + " .btn span").css("opacity", 0.4).mouseover(
                function() {
                    index = $(focusDivName + " .btn span").index(this);
                    showPics(index);
                }).eq(0).trigger("mouseover");

        // 上一页、下一页按钮透明度处理
        $(focusDivName + " .preNext").css("opacity", 0.2).hover(function() {
            $(this).stop(true, false).animate({
                "opacity" : "0.5"
            }, 300);
        }, function() {
            $(this).stop(true, false).animate({
                "opacity" : "0.2"
            }, 300);
        });

        // 上一页按钮
        $(focusDivName + " .pre").click(function() {
            index -= 1;
            if (index == -1) {
                index = len - 1;
            }
            showPics(index);
        });

        // 下一页按钮
        $(focusDivName + " .next").click(function() {
            index += 1;
            if (index == len) {
                index = 0;
            }
            showPics(index);
        });

        // 本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
        $(focusDivName + " ul").css("width", sWidth * (len));

        // 鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
        $(focusDivName).hover(function() {
            clearInterval(picTimer);
        }, function() {
            picTimer = setInterval(function() {
                showPics(index);
                index++;
                if (index == len) {
                    index = 0;
                }
            }, 4000); // 此4000代表自动播放的间隔，单位：毫秒
        }).trigger("mouseleave");

        // 显示图片函数，根据接收的index值显示相应的内容
        function showPics(index) { // 普通切换
            var nowLeft = -index * sWidth; // 根据index值计算ul元素的left值
            $(focusDivName + " ul").stop(true, false).animate({
                "left" : nowLeft
            }, 300); // 通过animate()调整ul元素滚动到计算出的position
            // //为当前的按钮切换到选中的效果
            $(focusDivName + " .btn span").stop(true, false).animate({
                "opacity" : "0.4"
            }, 300).eq(index).stop(true, false).animate({
                "opacity" : "1"
            }, 300); // 为当前的按钮切换到选中的效果
        }
    };
</script>

 

css代码：

ul,li {
    list-style: none;
}

img {
    border: 0;
}

.wrapper {
    width: 625px;
    margin: 0 auto;
    padding-bottom: 50px;
}

h1 {
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    font-weight: normal;
    font-family: "Microsoft YaHei", SimHei;
    margin-bottom: 20px;
}

/* focus */
#focus {
    width: 625px;
    height: 220px;
    overflow: hidden;
    position: relative;
}

#focus ul {
    z-index: 0;
    height: 220px;
    position: absolute;
    padding-left: 0px;
}

#focus ul li {
    float: left;
    width: 625px;
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #000;
}

#focus ul li div {
    position: absolute;
    overflow: hidden;
}

#focus .btnBg {
    position: absolute;
    width: 625px;
    height: 20px;
    left: 0;
    bottom: 0;
    background: #000;
}

#focus .btn {
    position: absolute;
    width: 625px;
    height: 10px;
    padding: 5px 10px;
    right: 0;
    bottom: 0;
    text-align: right;
}

#focus .btn span {
    display: inline-block;
    _display: inline;
    _zoom: 1;
    width: 25px;
    height: 10px;
    _font-size: 0;
    margin-left: 5px;
    cursor: pointer;
    background: #fff;
}

#focus .btn span.on {
    background: #fff;
}

#focus .preNext {
    width: 45px;
    height: 100px;
    position: absolute;
    top: 60px;
    background: url(images/index2013/sprite.png) no-repeat 0 0;
    cursor: pointer;
}

#focus .pre {
    left: 0;
}

#focus .next {
    right: 0;
    background-position: right top;
}