http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 4528|回复: 0

[Jquery] 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就行了
大家可以直接下载看看效果怎么样。



1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 17:31

© 2014-2021

快速回复 返回顶部 返回列表