当前位置: 代码迷 >> Web前端 >> jquery兑现无缝图片滚动
  详细解决方案

jquery兑现无缝图片滚动

热度:243   发布时间:2012-08-30 09:55:54.0
jquery实现无缝图片滚动
<!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>
<!--[if IE]>
   <script type="text/javascript" src="http://content3.ijie.cn/zh-CN/script/sitecore/html5.js">
</script>
<![endif]-->
<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>
  相关解决方案