zoukankan      html  css  js  c++  java
  • 图片轮播

    方法一、原生js,这种方法效果比较好

    html,设置最外围的div宽高为一次要展示的图片的总宽高,设置相对定位;内层div宽度为外层div宽度的2倍,高度与外层div一样,设置绝对定位。

    window.onload=function(){
    var oDemo=document.getElementById("demo");
    var odemo1=document.getElementById("demo1");
    var aDl=odemo1.getElementsByTagName("dl");
    var timer=null;
    var iSpeed=-5;
    odemo1.innerHTML+=odemo1.innerHTML;(用js复制图片为原来的两倍)
    odemo1.style.width=aDl[0].offsetWidth*aDl.length+"px";(此时,内层div的宽度为所有图片宽度相加,让它们在同一行显示)
    timer=setInterval(function(){
    odemo1.style.left=odemo1.offsetLeft+iSpeed+"px";
    if(odemo1.offsetLeft<-odemo1.offsetWidth/2){(如果运动到内层div宽度的一般就把它拉回到原来的位置)
    odemo1.style.left="0px";
    }
    },200);
    odemo1.onmouseover=function(){
    clearInterval(timer);
    }
    odemo1.onmouseout=function(){
    timer=setInterval(function(){
    odemo1.style.left=odemo1.offsetLeft+iSpeed+"px";
    if(odemo1.offsetLeft<-odemo1.offsetWidth/2){
    odemo1.style.left="0px";
    }
    },200);
    }
    }

    方法二、jQuery,animate方法(每隔两秒就把第一个图片移到最后)

    $(function(){
    setInterval(function(){

    $("ul").animate({"marginTop":-70},3000,function(){
    $(this).css("marginTop",0).find("li:first").appendTo(this);
    });
    },2000);
    });

    方法三,这种方法是使图片来回滑动

    $(function(){
    var index=0;
    setInterval(slide,2000);
    function slide(){
    index++;
    if(index==2){
    $("ul").css("left",0);
    index=0;
    }else{
    $("ul").animate({"left":"-=160px"},1000);
    }
    }
    });

  • 相关阅读:
    统计脚本代码行数
    expr算术运算
    lsof命令
    测试当前机器可以创建多少线程
    守护进程写日志
    文件描述符fd,struct files_struct
    linux查看反汇编
    信号补充
    Windows10获取VS管理员权限总是很烦人
    asp.net中的Filter类型其实是被当作单例的
  • 原文地址:https://www.cnblogs.com/annie211/p/5955132.html
Copyright © 2011-2022 走看看