`

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>
分享到：
| HTML Head 参数详解
评论
发表评论

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

相关推荐

    web-JQuery无缝图片滚动

    **jQuery无缝图片滚动**是一种常见的网页动态效果，用于在网页上展示一组图片，通过自动循环滚动，给予用户连续且平滑的视觉体验。这个技术基于JavaScript库jQuery，它简化了DOM操作，使得实现复杂的交互变得更加...

    JQuery实现的滚动相册无缝图片滚动

    **jQuery实现的滚动相册无缝图片滚动** 在网页设计中，滚动相册是一种常见的展示图片的方式，它能够以动态效果展示多张图片，为用户提供更好的视觉体验。在本项目中，我们将探讨如何使用jQuery库来实现一个无缝滚动...

    jQuery 无缝图片横向滚动代码

    总之，jQuery无缝图片横向滚动代码的实现涉及到了前端开发的多个核心技能，包括DOM操作、事件处理、动画制作以及响应式设计等。通过合理运用这些知识点，我们可以创建出美观且用户体验良好的图片滚动效果。

    jquery图片无缝滚动代码左右上下无缝滚动图片

    "jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术，它使得图片能够在页面上以平滑、连续的方式移动，既可以从左到右，也可以从上到下，为用户带来流畅的视觉体验。 jQuery是一个...

    jQuery图片左右无缝滚动特效代码

    jQuery图片左右无缝滚动特效是一种常见的网页动态效果，用于展示多张图片并营造出平滑、连贯的浏览体验。...开发者可以通过理解这些知识点，结合实际的代码实现，来创建或优化自己的图片滚动特效。

    jQuery实现的图片滚动效果

    3. **jQuery选择器和遍历**：在实现图片滚动效果时，我们需要选择所有的图片元素，并对它们进行操作。jQuery提供了丰富的选择器，如`$("img")`，以及遍历方法，如`.each()`，来处理这些元素。 4. **动画效果**：...

    DIV+CSS实现横向无缝图片滚动效果

    以上就是使用DIV+CSS实现横向无缝图片滚动效果的基本原理和实现步骤。在实际项目中，你可以根据需求调整细节，例如添加缓动效果、调整滚动速度，或者增加交互元素，使滚动更加动态和吸引人。通过这种方式，可以有效...

    Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip

    【标题】"Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip" 提供的是一个基于jQuery的图片滚动插件，它具有丰富的视觉效果，能够实现图片的无缝连续循环滚动，不仅支持横向滚动，还支持纵向滚动，为网页增添动态...

    jquery向上无缝滚动

    在网页设计中，动态效果常常能提升用户体验，其中“向上无缝滚动”是一种常见的文本或图片滚动展示方式。这个效果使得内容能够持续不断地从底部向上滚动，给用户带来连贯且吸引人的视觉体验。在本文中，我们将深入...

    jquery 无缝滚动 demo

    总结，实现jQuery无缝滚动效果并不复杂，只需理解其基本原理，并结合jQuery的动画功能，即可轻松创建出具有吸引力的网页动态效果。通过不断优化和扩展，可以让这个效果更加丰富多彩，满足不同场景的需求。

    jquery实现图片左右滚动

    在了解如何实现图片滚动之前，首先需要对 jQuery 有一定的基础认识。jQuery 是一个轻量级的库，通过提供易于使用的 API，使得 JavaScript 开发更为便捷。它的核心功能包括选择器（用于选取 HTML 元素）、DOM 操作...

    jquery 图片 无缝 滚动 插件

    6. **响应式设计**：考虑到移动设备的广泛使用，`jquery auto mobilyslide`可能还包含了响应式设计，使得图片滚动效果在不同屏幕尺寸下都能良好运行。 在实际应用中，开发者需要根据项目需求进行适当的定制。例如，...

    jquery图片无缝滚动

    jQuery图片无缝滚动是一种常见的网页动态效果，用于展示一组图片，以滑动的形式...通过合理地组织代码，我们可以创建出高效、美观的图片滚动效果。在学习和实践过程中，不断探索和优化，将使你的网页动态效果更加出色。

    JQuery特效-无缝滚动

    基于jquery开发的一个特效,图片的无缝滚动，对学习web开发的人有帮助,jquery库和图片自己定义即可

    无缝图片滚动效果，基于IE6，好看使用的

    在文件名称"jquery-gd20151222"中，我们可以推测这可能是一个jQuery插件或脚本文件，用于实现2015年12月22日更新的无缝图片滚动功能。这个文件可能包含了实现无缝滚动的JavaScript代码，包括定义滚动速度、动画效果...

    jquery图片无缝滚动插件上下左右图片无缝滚动代码

    6. **插件使用**：在实际项目中，开发者可能会使用已有的jQuery无缝滚动插件，比如`jQuery.scrollable`或`jQuery.Slide`等。这些插件通常提供丰富的配置选项和API，以满足不同需求。 在提供的文件名`texiao5488_...

    无缝图片滚动效果

    在实现无缝图片滚动时，开发者通常会使用JavaScript库，如jQuery，来处理事件和动画效果。jQuery是一个轻量级、高性能的JavaScript库，提供了丰富的API供开发者使用。在这个例子中，"jquery-gd"可能是一个基于jQuery...

    jquery实现图片无缝轮播

    **jQuery 实现图片无缝轮播**\n\n在网页设计中，图片轮播是一种常见的功能，用于展示多张图片或内容。jQuery 是一个强大的 JavaScript 库，它简化了JavaScript编程，使得实现动态效果如图片无缝轮播变得轻而易举。...

    jQuery banner无缝拼接滚动.zip

    下面将详细介绍jQuery Banner无缝拼接滚动的原理、实现方法以及相关知识点。 **jQuery**：jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。它的语法简洁，使得创建动态网页...

Magicbox
Global site tag (gtag.js) - Google Analytics