zoukankan      html  css  js  c++  java
  • jQuery 简易版的无缝图片轮播切换

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title></title>

    </head>

    <style>

    *{padding:0;margin:0;}

    ul,li{list-style:none;}

    .wrap{position: relative;200px;height:150px;border:2px solid #ddd;margin:50px auto;overflow:hidden;}

    .photo{position:absolute;left:0;top:0;}

    .photo li{200px;height:150px;float:left;}

    </style>

    <body>

    <div class="wrap">

    <ul class="photo">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    </ul>

    </div>

    </body>

    </html>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script>

    $(function(){

     //定义颜色

     var colorArray = ['pink','red','orange'];

     var photoLi = $('.photo li');

     

    //定义图片个数

     var  photoLen = photoLi.length;

     for( var i=0 ; i < photoLen ; i++ ){

      photoLi.eq(i).css('background',colorArray[i] );

     } 

     //定义单个li的宽

     var firstLiWidth = photoLi.eq(0).width();

     //定义photo的宽度来撑开

     $('.photo').width( firstLiWidth * photoLen );

     //定义两个计数器

     var num=0; 

     var num2=0;

    //移动开始

     setInterval(photoMove,2000);

    //移动函数

     function photoMove(){

      //当 num 等于图片个数减1的时候

      if (num == photoLen-1) {

         //第一个计数器为0来保持循环

         num = 0; 

          //当第一个计数器等于0的时候那么就是开始位置的时候第一张图片就变成相对定位,然后排到了尾部

        photoLi.eq(0).css({

        position:'relative',

        left : $('.photo').width() + 'px'

        });

     }else{

      num ++;

     }

      

      num2++;

      //num2是控制图片滚动的位置

      $('.photo').animate({left:-num2 * firstLiWidth +'px'}, 1000,function(){

      //回调函数的作用在于等num2等于图片个数的时候那么让第一张图片定位变成默认状态,photo的 left 也回到0px位置,num2又设为0

      if (num2 == photoLen) {

          

          photoLi.eq(0).css('position', 'static');

          $('.photo').css('left',0);

           num2 = 0;

        }

      })

      }

    });

    </script>

  • 相关阅读:
    AutoFac中常用方法说明
    DI之循环依赖
    NB/T 10215-2019 风力发电机组 测风传感器等最新能源行业标准
    DL/T 691-2019等最新电力行业标准
    TSG D7006-2020 压力管道监督检验规则
    YY/T 0595-2020 医疗器械 质量管理体系YY/T 0287-2017 应用指南
    GB/T 38775-2020系列电动汽车无线充电系统标准
    最新电动汽车安全标准
    GB 38032-2020 电动客车安全要求
    GB 38031-2020 电动汽车用动力蓄电池安全要求
  • 原文地址:https://www.cnblogs.com/zion0707/p/3889395.html
Copyright © 2011-2022 走看看