自己改的一个li里的图片的向左无缝滚动

最新推荐文章于 2021-03-23 17:27:45 发布

qinglinglaoren

最新推荐文章于 2021-03-23 17:27:45 发布

阅读量2.2k

点赞数

分类专栏： Div+Css+Js 文章标签： scroll div function border xhtml float

本文链接：https://blog.csdn.net/qinglinglaoren/article/details/6955096

版权

Div+Css+Js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<link href="study.css" type="text/css" rel="stylesheet">
</head>

<body>
    
    
    
    <!--#####滚动区域#####-->
    <div id="scroll_div" class="scroll_div">
    <div class="mi">
          <div id="scroll_begin">
            <ul>
              <li><a href="#"><img src="../image/wall4.jpg" /></a></li>
             <li><a href="#"><img src="../image/wall5.jpg" /></a></li>
             <li><a href="#"><img src="../image/wall6.jpg" /></a></li>
              <li><a href="#"><img src="../image/wall7.jpg" /></a></li>
              <li><a href="#"><img src="../image/wall8.jpg" /></a></li>
                <li><a href="#"><img src="../image/bg3.jpg" /></a></li>
              <li><a href="#"><img src="../image/xg.jpg" /></a></li>
            </ul>
          </div>
          <div id="scroll_end"></div>
      </div>
    </div>
  <script type="text/javascript">
            var speed=20;
            var scroll_begin = document.getElementById_x("scroll_begin");
            var scroll_end = document.getElementById_x("scroll_end");
            var scroll_div = document.getElementById_x("scroll_div");
            scroll_end.innerHTML=scroll_begin.innerHTML;
            function Marquee(){
                if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){
                  scroll_div.scrollLeft-=scroll_begin.offsetWidth;
                  //alert('if');
                } else {
                  scroll_div.scrollLeft++;
                  //alert(scroll_div.scrollLeft);
                }
            //alert(scroll_div.scrollLeft);
            }
            var MyMar=setInterval(Marquee,speed)
            scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
            scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
        </script>
    <!--#####滚动区域#####-->
   
   
</body>
</html>

* {
 font-family:"宋体";
 font-size:12px;
 color:#000000;
}
ul, li {
 list-style-type:none;
 margin:0px;
 padding:0px;
}
dl, dt, dd {
 margin:0px;
 padding:0px;
}
.kong {
 font:0px;
 display:block;
 clear:both;
 height:0;
 line-height:0;
 margin:0;
 padding:0;
}
body, html {
 margin:0px;
 padding:0px;
 background:#FFFFFF;
}
A:link {
 text-decoration: none
}
A:visited {
 text-decoration: none
}
A:active {
 text-decoration: none
}
A:hover {
 text-decoration: underline
}

 


.scroll_div {
 width:690px;
 height:105px;
 overflow:hidden;
 background:#CCC;
}
.scroll_div img {
 width:78px;
 height:101px;
 border: 0;
 margin: 0 8px;
 border:1px #efefef solid;
}
.mi {
 width:1380px;
 height:105px;
}
#scroll_begin, #scroll_end {
 width:690px;
 height:105px;
 float:left;
}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li {
 display:block;
}
 #scroll_begin ul li , #scroll_end ul li { float:left;}

界面没有做处理，只是做出了简单的效果