• js自动轮播图片的两种循环方法(原创)


    用5个div,布局从左到右5张图片,从左到右5个div分别指定ID为img1,img2,img3,img4,img5.(背景是relative,5个div是相对于背景absolute定位)

    显示如下:

    方法一:(把一个div直接赋值给另一个,轮播一次要for循环5下)

     1 function autoplay(){
     2             var x,y,baoliu;
     3             baoliu=document.getElementById("img5").style.backgroundImage;
     4             for(i=5;i>0;i--){
     5                 y=document.getElementById("img"+i);
     6                 if(i==1){
     7                     x=baoliu;
     8                     y.style.backgroundImage=x;
     9                 }
    10                 else{
    11                     x=document.getElementById("img"+(i-1));
    12                     y.style.backgroundImage=x.style.backgroundImage;
    13                 }
    14             }
    15         }

    方法二:(两两互相交换,轮播一次for循环4下)

     1 function autoplay(){
     2             var x,y,baoliu;
     3             for(i=5;i>1;i--){
     4                 x=document.getElementById("img"+(i-1));
     5                 y=document.getElementById("img"+i);
     6                 baoliu=y.style.backgroundImage;
     7                 y.style.backgroundImage=x.style.backgroundImage;
     8                 x.style.backgroundImage=baoliu;
     9             }
    10         }

    轮播一次的结果:

    关于这两种方法到底孰优孰劣,有待精学后分析。

  • 相关阅读:
    单分发器
    Python 虚拟环境
    $modal
    memoization
    directive例子2
    UI-Router
    angular-translate
    directive例子1
    FileInputStream/FileOutputStream的应用
    自定义readLine
  • 原文地址:https://www.cnblogs.com/caiquan/p/6175727.html
Copyright © 2020-2023  润新知