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>

  • 相关阅读:
    常用的正则表达式
    vue多页面应用
    webpack + jquery + bootstrap 环境配置
    Goroutine的几个例子
    设置css通用字体
    简单的gulpfile.js参数配置
    1:时间戳转换成年月日函数,2:url截取参数方法,3:弹窗自定义方法 4:点击按钮加入购物车
    github上比较全的知识
    秒杀倒计时
    正则校验手机号码并获取手机验证码倒计时的实例
  • 原文地址:https://www.cnblogs.com/limit1/p/3920554.html
Copyright © 2011-2022 走看看