zoukankan      html  css  js  c++  java
  • 简单的一个轮播效果

    刚刚学了Jquery,写了一个简单的图片滑动,但不是完成品。

    <!DOCTYPE html>
    <meta content="text/html" charset="utf-8"/>
    <html>
    <head>
    <title></title>
    <link href="css/lunbo.css" rel="stylesheet"/>
    <script src="jquery-1.8.3.js"></script>
    <script src="js/lunbo.js"></script>
    </head>
    <body>
    <nav>
    <div id="main">
    <ul class="list">
    <li><img src="images/TB1ERCWFVXXXXaVaXXXXK5zTVXX-520-280.png" alt=""
    ></li><li><img src="images/TB1HjqjFVXXXXcqaXXXSutbFXXX.jpg" alt=""
    ></li><li><img src="images/TB1MKkpFVXXXXXsXpXXSutbFXXX.jpg" alt=""
    ></li><li><img src="images/TB1naLvFVXXXXc6XVXXSutbFXXX.jpg" alt=""></li></ul>
    </div>
    </nav>

    </body>
    <script>
    setInterval(function(){

    //图片滑轮效果要在setinterval中执行,改方法有2个参数一个时,执行的函数,一个时时间间隔

    $('.list li').first().animate({marginLeft:'-520px'},1000,function(){

    //jquery获取元素的节点跟css很相似, 在该类选择器的li中得到li中的第一个元素,方法是first()方法,得到的元素要滑动,则执行动画效果,向右移动520px,这个移动的时间是1s,再动画中添加一个匿名函数,来使得前面执行完的图片接着后面执行。
    // console.log(this)

    //打印得出当前的移动对象
    var temp=$(this).clone();

    //进行对当前对象克隆一份
    temp.css({marginLeft:'0px'});

    //克隆的对象包含之前的css属性,我们要重新定义
    $('.list').append(temp);

    //把对象添加到类容器中
    $(this).remove();

    //删除之前的对象,为了下一个移动
    })
    },2000)
    </script>
    </html>

  • 相关阅读:
    nginx日志格式配置
    shell入门(一)
    shell批量创建随机文件名格式文件
    Centos7 下安装配置tomcat7
    Linux安装VM虚拟化软件
    mysql初探
    java.lang.ClassNotFoundException: org.apache.commons.collections.FastHashMap
    HTTP Status 500 ? Internal Server Error
    如何使用Chrome浏览器查看网页的响应头
    Servlet的API
  • 原文地址:https://www.cnblogs.com/limit1/p/3920554.html
Copyright © 2011-2022 走看看