怎么用CSS代码实现，好多图片横向的不间断滚动？

2023-05-01 21:50:03html-css0135

怎么用CSS代码实现，好多图片横向的不间断滚动？,第1张

1、在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。

2、在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。

3、在新建的<a></a>内，添加横向导航要显示的内容。

4、在<title></title>下方添加一个<style type="text/css"></style>。

5、源文件html保存后，使用浏览器打开预览效果。

可以使用DIV+CSS+JS实现不间断横向滚动代码，具体代码如下：

<!DOCTYPE html>

<html>

<head>

<title>横向不间断滚动DIV CSS代码-DIVCSS5</title>

</head>

<body>

<style>

.scroll_div {width:600px height:49pxmargin:0 auto overflow: hidden white-space: nowrap background:#ffffff}

.scroll_div img {width:120pxheight:49pxborder: 0margin: auto 8px }

#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline}/* 设置ul和li横排 */

</style>

function ScrollImgLeft(){

var speed=20

var scroll_begin = document.getElementById("scroll_begin")

var scroll_end = document.getElementById("scroll_end")

var scroll_div = document.getElementById("scroll_div")

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee(){

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

scroll_div.scrollLeft-=scroll_begin.offsetWidth

else

scroll_div.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

scroll_div.onmouseover=function() {clearInterval(MyMar)}

scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

}

</script>

<h2 align="center"><a href="http://www.divcss5.com/">DIVCSS5</a>演示说明：向左滚动</h2>

<ul>

</ul>

</div>

</div>

</div>

</div>

</body></html>

<div id="colee_left" style="overflow:hiddenwidth:500px"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="colee_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><p><img src=" http://www.120shenyan.com/1.jpg"></p></td><td><p><img src=" http://do.faqshen.com/1.jpg"></p></td><td><p><img src=" http://www.shenjiayuan.com/1.jpg"></p></td><td><p><img src=" http://js.alixixi.com/img/201108/1.jpg"></p></td><td><p><img src=" http://js.alixixi.com/img/201108/1.jpg"></p></td><td><p><img src=" http://js.alixixi.com/img/201108/1.jpg"></p></td><td><p><img src=" http://js.alixixi.com/img/201108/1.jpg"></p></td></tr></table></td><td id="colee_left2" valign="top"></td></tr></table></div><script>//使用div时，请保证colee_left2与colee_left1是在同一行上. var speed=30//速度数值越大速度越慢 var colee_left2=document.getElementById("colee_left2")var colee_left1=document.getElementById("colee_left1")var colee_left=document.getElementById("colee_left")colee_left2.innerHTML=colee_left1.innerHTML function Marquee3(){ if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 else{ colee_left.scrollLeft++ } } var MyMar3=setInterval(Marquee3,speed) colee_left.onmouseover=function() {clearInterval(MyMar3)} colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} </script>

求采纳

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：css3动画效果，如何设置呢？

# 下一篇：Python这两年还火吗？