jquery实现图片切片效果。可定时自动切换

站长苏飞 · 发表于 2014-1-20 09:48:30

jquery实现图片切片效果。可定时自动切换

大家直接看我的代码吧

[HTML] 纯文本查看 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jquery内容左右切换效果</title>
    <style type="text/css">
        .wrap { float: left; position: relative; width: 247px; height: 150px; z-index: 1; overflow: hidden; }
        .cc { height: 140px; position: absolute; top: 0px; left: -494px; z-index: 2; overflow: hidden; }
        .btn { float: left; width: 11px; margin-top: 70px; z-index: 3; }
        .cc p.con { width: 238px; height: 135px; background: #ffecc4; }
    </style>
    <script src="dummy-images/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var leftsize = -494;
        $(document).ready(function () {
            $("#btn_l").click(function () {
                if (leftsize > -247) {
                    leftsize = leftsize - 247;
                    $(".cc").animate({ "left": leftsize });
                }
                else if (leftsize = -247) {
                    leftsize = leftsize - 247;
                    $(".cc").animate({ "left": leftsize });
                }
                else { $(".cc").css('left', '0px'); }
            });

            $("#btn_r").click(function () {
                if (leftsize < -247) {
                    leftsize = leftsize + 247;
                    $(".cc").animate({ "left": leftsize });
                }
                else if (leftsize = -247) {
                    leftsize = leftsize + 247;
                    $(".cc").animate({ "left": leftsize });
                }
                else { $(".cc").css('left', '-494px'); }
            });

        });
        var i = 1;
        var f = true;
        function auto() {
            if (f) {
                $("#btn_r").click();
                i++;
                if (i == 4) {
                    f = false;
                    i = 1;
                }
            } else {
                $("#btn_l").click();
                i++;
                if (i == 4) {
                    f = true;
                    i = 1;
                }
            }
            setTimeout("auto()", 1000);
        }
        auto();
    </script>
</head>
<body>
    <div id="btn_l" class="btn">
        <</div>
    <div class="wrap">
        <div class="cc" style="width: 741px;">
            <div style="float: left; width: 241px; padding: 5px 3px;">
                <p class="con">
                    111</p>
            </div>
            <div style="float: left; width: 241px; padding: 5px 3px;">
                <p class="con">
                    222</p>
            </div>
            <div style="float: left; width: 241px; padding: 5px 3px;">
                <p class="con">
                    333</p>
            </div>
        </div>
    </div>
    <div id="btn_r" class="btn">
        ></div>
</body>
</html>

其实这里面主要是Js部分
上面的不用看是单击是处理的，主要是下面这个定时的方法

[JavaScript] 纯文本查看 复制代码

        var i = 1;
        var f = true;
        function auto() {
            if (f) {
                $("#btn_r").click();
                i++;
                if (i == 4) {
                    f = false;
                    i = 1;
                }
            } else {
                $("#btn_l").click();
                i++;
                if (i == 4) {
                    f = true;
                    i = 1;
                }
            }
            setTimeout("auto()", 1000);
        }
        auto();

if (i == 4)可根据自己的图片多少来设置，图片数量+1就行了
大家可以直接下载看看效果怎么样。

		自动登录	找回密码
密码			马上注册

[Jquery] jquery实现图片切片效果。可定时自动切换

相关帖子