jquery实现无缝图片滚动 -

lzf0514

浏览: 108512 次
性别:
来自: 江西

最近访客更多访客>>

zhangyanwei_321

itChenEye

LinXin__

lxj1981a

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery实现无缝图片滚动

博客分类：

javascript
css+xhtml

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="爱结网（来自纽约，最顶级的婚礼网站）&动感101电台联袂推出的大型活动"全上海都在相信爱情"中最受女孩子们关注的"巴士新娘变身秀"日前在上海新江湾城SMP滑板公园盛大举行，有爱结网全程提供的最新款婚纱、新娘妆、发型服务，让平凡的女孩子圆了幸福新娘梦想！" />
<meta name="keywords" content="爱结,爱结上海,爱结网站,全上海都相信爱情,公车新娘变身秀,爱结活动,新娘换装,新娘造型,婚纱摄影,个性婚纱" />
<meta name="robots" content="FOLLOW,INDEX" />
<link rel="Shortcut Icon" type="image/ico" href="http://content1.ijie.cn/zh-CN/image/sitecore/favicon.ico" />
<title>爱结上海全上海都相信爱情之公车新娘变身秀 - 爱结 ijie.com</title>

<link href="http://content2.ijie.cn/zh-CN/20111021/style/ijieevents/shbusshow2011/global.css" rel="stylesheet" type="text/css" />
<link href="http://content2.ijie.cn/zh-CN/20111021/style/ijieevents/shbusshow2011/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://content2.ijie.cn/zh-CN/script/common/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var pic = $(".eventspicslidebox ul");
        var prevbtn = $(".prevbtn");
        var nextbtn = $(".nextbtn");
        var auto = setTimeout(movetoleft, 3000);
        nextbtn.bind("click", function () {
            clearTimeout(auto);
            movetoleft();
        });
        prevbtn.bind("click", function () {
            clearTimeout(auto);
            movetoright();
        });
        function movetoleft() {
            pic.animate({ left: "-150px" }, 500, function () {
                pic.children().first().appendTo(pic);
                pic.css("left", "0");
                auto = setTimeout(movetoleft, 3000);
            });
        }
        function movetoright() {
            pic.children().last().prependTo(pic);
            pic.css("left", "-150px");
            pic.animate({ left: "0px" }, 500, function () {
                auto = setTimeout(movetoleft, 3000);
            });
        }
    });
</script>
</head>

<body>
<section class="eventspicslide">
<header>精彩花絮</header>
    <div class="eventspicslide-c clearfix">
    <div class="eventspicslidebox">
        <ul class="clearfix">
                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览1</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览2</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览3</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览浦江游览浦江游览浦江游览4</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览5</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览6</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览7</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览8</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览9</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览10</a>
                </figcaption>
                </figure>
                </li>

                <li>
                <figure> <a target="_blank" href="" title=""><img src="http://content2.ijie.cn/zh-CN/20111021/image/ijieevents/shbusshow2011/shbus_11.jpg" alt=""></a>
                <figcaption>
                    <a class="" target="_blank" href="" title="">浦江游览11</a>
                </figcaption>
                </figure>
                </li>
        </ul>
        </div>
        <div class="prevbtn"></div>
        <div class="nextbtn"></div>
    </div>
</section>
</body>
</html>

分享到：

图片水平垂直居中 | HTML Head 参数详解

2011-10-24 13:58
浏览 920
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery实现无缝图片滚动

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery实现无缝图片滚动

评论

发表评论

相关推荐

在js文件中显示jquery的智能提示VS2010

英文强制自动换行

DIV+CSS布局中自适应两列等高的解决方法

关于浏览器内核的一些概念

介绍 10 个 CSS3 属性

将手机网站做成手机应用的JS框架

图片水平垂直居中

HTML Head 参数详解

IE6文字溢出BUG

div背景半透明，文字不透明

JS变量的作用域

图片延迟加载之随滚动条显示

三列等高。中间列优先

a空标签设成块元素后ie7不能点击

ie6支持position:fixed

jquery实现tab选项卡

常用JS代码大全

jquery实现自定义select表单

jquery实现图片幻灯片切换代码

js控制图片自动等比例缩放

最近访客更多访客>>