web前端滚动效果

这次写的是滚动字体，首先我的附上代码：

offsetWidth:width+padding+border的值。
offsetLeft:获取当前对象与父元素之间的距离.
scrollLeft：是该对象实现的内容与实际内容的距离，即当前滚动的距离。

if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth;

如果字体已经滚出的长度大于scroll_end的原长度，就要使其减掉scroll_begin的长度，即复原。（因为这三者的长度都一样).

MyMar = setInterval(Marquee,speed);
即每过speed毫秒，实行一次这个函数。

clearInterval(MyMar);
即清除这个设置的timeout。

HTML代码：

<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<span id="welcome">
欢迎光临本网站，你想要的这里都有哦!
</span>
</div>
<div id="scroll_end">
</div>
</div >

js代码：

}

图片滚动：图片滚动跟上面差不多，特别的是如果是循环无缝滚动的话，要将ul的innerHTML设置为原来的两倍，这样在最后的出现时，第一个可以无缝衔接在最后一个后面。参考网址：http://www.jb51.net/article/78342.htm

},false);

右击出现自定义菜单：

代码：

e.clientX：被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。客户区指的是当前窗口。

}

特别要注意的是，要让出现的菜单漂浮在div上，要将该div的position设置为relative，菜单的position设置为absolute。

最后就是实现点击上、下一张图片相应的变化，悬浮在响应的数字上图片也变化，鼠标移开，图片自动滚动，首先附上参考网址：https://blog.csdn.net/q908555281/article/details/70314080

附上我的代码：

html代码：
<div id="wrapper">
          <div id="imgs">
               <ul>
                    <li><a href=""><img src="./image/coin.jpg" alt=""></a></li>
                    <li><a href=""><img src="./image/coin1.jpg" alt=""></a></li>
                    <li><a href=""><img src="./image/coin2.jpg" alt=""></a></li>
                    <li><a href=""><img src="./image/coin3.png" alt=""></a></li>
               </ul>
          </div>
          <div id="nav">
               <ul>
                    <li><a class="current">1</a></li>
                    <li><a>2</a></li>
                    <li><a>3</a></li>
                    <li><a>4</a></li>
               </ul>
          </div>
          <div id="previous"><</div>
          <div id="next">></div>

</div>

js代码：
function scroll(){
       var imgs_div=document.getElementById("imgs");
     var nav_div=document.getElementById("nav");
     //获取到图片轮播的ul对象数组
     var imgsUl=imgs_div.getElementsByTagName("ul")[0];
     imgsUl.style.left="0";
     //获取到远点的ul对象数组
     var nav=nav_div.getElementsByTagName("ul")[0];
     //上一个
     var previous=document.getElementById("previous");
     //下一个
     var next =document.getElementById("next");
        var index=1;
     function btnShow(cur_index){
     var list=nav.children;
     for(var i=0;i<nav.children.length;i++){
          nav.children[i].children[0].className="hidden";
     }
     nav.children[cur_index-1].children[0].className="current";
    }
      var animTimer;
     previous.onclick=function(){
            index-=1;
            if(index<1){
                 index=4;
            }
            animate(1280);
            btnShow(index);

}

       next.onclick=function(){
            index+=1;
            if(index>4){
                 index=1;
            }
            animate(-1280);
            btnShow(index);
       }

       function animate(offset){
            var newLeft=parseInt(imgsUl.offsetLeft)+offset;
            if(newLeft>0){          //如果图片已经右滚到第一张，让它回到倒数第一张
                 show(-3840);
            }else if(newLeft<-3840){ //如果图片已经左滚到最后一张，让它回到第一张
                 show(0);
            }else{
                 show(newLeft);
            }

       }
       function show(offset)
       {
          imgsUl.style.left=offset+"px";
       }
    var timer;
    function play(){
         timer=setInterval(function(){
          next.onclick();
         },2000)
    }
      function initImgs(cur_index){    //点击上下或数字，不需要自动播放
      clearInterval(timer);
      clearInterval(animTimer);
      var off=cur_index*1280;
      imgsUl.style.left=-off+"px";
    }

       for(var i=0;i<nav.children.length;i++){
         nav.children[i].index=i;
         var sd=nav.children[i].index;
         nav.children[i].onmouseover=function(){
              var now_index=this.index;
              //这里很重要，要让当前的图片的index的值等于鼠标选中的图片
              index=this.index+1;
              initImgs(this.index);
              btnShow(this.index+1);
         }
          nav.children[i].onmouseout=function(){
               play();
          }
       }

}

好了，就是这些了，我也不知道最后会不会被采取。

猜你喜欢