zoukankan      html  css  js  c++  java
  • 无缝滚动

     对于js部分:

    <script>

    window.onload=function(){

    }

    var all=document.getElementById("all");
    var screen=document.getElementById("screen");
    var imgWidth=screen.offsetWidth;
    var ul=document.getElementById("ul");
    var ulLiArr=ul.children;
    var ol=screen.children[1];
    var arr=screen.children[2];
    var left=document.getElementById("left");
    var right=document.getElementById("right");


    //copy
    ul.appendChild(ulLiArr[0].cloneNode(true));
    //ol内容填充
    for (var i=0;i<ulLiArr.length-1;i++){
    var newli=document.createElement("li");
    newli.innerHTML=i+1;
    ol.appendChild(newli);
    }

    //点亮样式
    var olLiArr=ol.children;
    olLiArr[0].className="current";

    //绑定动画
    for (var i=0;i<olLiArr.length;i++){
    olLiArr[i].onmouseover=function(){
    for(var j=0;j<olLiArr.length;j++){
    olLiArr[j].className="";
    }
    this.className="current";
    animate(ul,-imgWidth*(this.innerHTML-1));
    key=square=this.innerHTML-1;

    }
    }
    //右边按钮事件
    var key=0;
    var square=0;
    right.onclick=auto;
    //左边按钮事件
    left.onclick=auto1;

    //定时器
    var timer=setInterval(auto,1000);

    all.onmousemove=function(){
    arr.style.display="block";
    clearInterval(timer);
    }
    all.onmouseout=function(){
    arr.style.display="none";
    timer=setInterval(auto,1000);
    }
    //右边按钮的封装
    function auto(){
    key++;
    if (key===6){
    ul.style.left=0;
    key=1;
    }
    square++;
    if (square===5){
    square=0;
    }
    for(var j=0;j<olLiArr.length;j++){
    olLiArr[j].className="";
    }
    olLiArr[square].className="current";
    animate(ul,-imgWidth*key);
    }
    //左边按钮的封装
    function auto1(){
    key--;
    if (key===-1){
    ul.style.left=-imgWidth*5+"px";
    key=4;
    }
    square--;
    if (square===-1){
    square=4;
    }
    for(var j=0;j<olLiArr.length;j++){
    olLiArr[j].className="";
    }
    olLiArr[square].className="current";
    animate(ul,-imgWidth*key);
    }
    }
    function animate(ele,target){
    clearInterval(ele.timer);
    ele.timer=setInterval(function(){
    var sep=target>ele.offsetLeft?10:-10;
    ele.style.left=ele.offsetLeft+sep+"px";
    if (Math.abs(target-ele.offsetLeft)<=Math.abs(sep)){
    ele.style.left=target+"px";
    clearInterval(ele.timer);
    }
    },10);
    }

    </script>

  • 相关阅读:
    Python协程
    Python3常用标准库
    温故而知新--day3
    温故而知新--day2
    解决 WPF 绑定集合后数据变动界面却不更新的问题
    WPF 消息框 TextBox 绑定新数据时让光标和滚动条跳到最下面
    C# 枚举转列表
    真・WPF 按钮拖动和调整大小
    使用 GB28181.Solution + ZLMediaKit + MediaServerUI 进行摄像头推流和播放
    将 .NET Framework 项目转换为 .NET Standard 项目
  • 原文地址:https://www.cnblogs.com/suixiangff/p/6637783.html
Copyright © 2011-2022 走看看