无缝滚动条目

最新推荐文章于 2024-08-28 11:23:55 发布

Cc_JoJo

最新推荐文章于 2024-08-28 11:23:55 发布

阅读量393

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： html js

本文链接：https://blog.youkuaiyun.com/caohoucheng/article/details/72845366

web前端专栏收录该内容

20 篇文章

订阅专栏

无缝滚动

效果预览：
这里写图片描述
效果分析：
1.4张图片轮播
2.鼠标悬浮轮播暂停，鼠标移开轮播继续
3.默认从左到右轮播
4.点击左箭头，往左轮播，再点击右箭头，往右轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
    margin: 0px;
    padding: 0px;
}
#div1 {
    float: left;
    width: 896px;
    height: 105px;
    background: red;
    margin: auto;
    position: relative;
    overflow: hidden;
}
#div1 ul {
    position: absolute;
    left: 0px;
    top: 0px;
}
#div1 ul li {
    width: 224px;
    height: 105px;
    float: left;
    list-style: none;
}
</style>
<script>
window.onload=function(){
    var oDiv=document.getElementById('div1');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var oLi=oUl.getElementsByTagName('li');
    var oLeft=document.getElementById('left');
    var oRight=document.getElementById('right');
    var spend=2;
    //  //为了实现无缝滚动效果，将4张图片和自身拼接，改成8张
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    //oUl的宽度等于（li个数*li宽度)
    oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
    function run()
    {
        //往左移动，当左移动一半的时候，把left设置为0
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left='0';
            }
            //往右移动，当右移动一半的时候，把left设为总宽的一半
        if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+'px';
            }
        oUl.style.left=oUl.offsetLeft+spend+'px';
    }
    var timer=setInterval(run,30);

    oDiv.onmouseover=function(){
        clearInterval(timer);
        };

    oDiv.onmouseout=function(){
         timer=setInterval(run,30);
        }
    oLeft.onmouseover=function(){
        oLeft.src='left1.png';
        }
    oLeft.onmouseout=function(){
        oLeft.src='left.png';
        }
    oRight.onmouseover=function(){
        oRight.src='right1.png';
        }
    oRight.onmouseout=function(){
        oRight.src='right.png';
        }
    oLeft.onclick=function(){
        spend=-2;
        }
    oRight.onclick=function(){
        spend=2;
        }
    };

</script>
</head>

<body >
<div style="width:1300px;height:auto;background:red;margin:auto auto"> 
<img id="left" src="left.png" style="float:left;width:200px;height:105px;"/>
  <div id="div1">
    <ul>
      <li><img src="1.png" /></li>
      <li><img src="2.png" /></li>
      <li><img src="3.png" /></li>
      <li><img src="4.png" /></li>
    </ul>
  </div>
  <img id="right" src="right.png" style="float:left;width:200px;height:105px;"/> </div>
</body>
</html>

源码地址