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

CSS实现不了，配合JS才行

<style type="text/css">
<!--
#demo {overflow:hidden;width:740px; }
#indemo { float: left; width: 800%;}
#demo1 { float: left; }
#demo2 { float: left;margin-left:7px;}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>追问

但是我head网页里面有一个java代码，在加一个java代码，要注意什么格式么

追答

不用放在head里，就放在滚动代码旁边就好了，方便识别

注意var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2"); 看下var后面的变量有没有冲突的

本回答被提问者和网友采纳

<marquee></marquee>

<div class="gongbj">

<div class="xiaoy wow slideInUp">
<div class="dingd">{dede:type typeid='37'}<a href="[field:typeurl/]"><h2>[field:typename/]</h2></a>{/dede:type}</div>
<div class="dong">
<ul>
{dede:arclist row='10' typeid='37' titlelen='50' orderby='pubdate'}
<li><a href="[field:arcurl/]"><img src="[field:picname/]" alt="[field:title/]"></a><span>[field:title/]</span></li>
{/dede:arclist}

{dede:arclist row='10' typeid='12' titlelen='50' orderby='pubdate'}
<li><a href="[field:arcurl/]"><img src="[field:picname/]" alt="[field:title/]"></a><span>[field:title/]</span></li>
{/dede:arclist}
</ul>
</div>
</div>
</div>

下面是CSS代码：
.gongbj{ margin:0 auto; height:280px; background: url(../img/cgzs-bg.png) top center no-repeat;z-index:-10000; padding-top:20px; padding-bottom:30px;overflow: hidden;}
.xiaoy{ width:1200px; height:250px; margin:0 auto;

border-image: -webkit-linear-gradient(135deg,#B13D37,#f80) 20 20;

border-image: -moz-linear-gradient(135deg,#B13D37,#f80) 20 20;

border-image: -o-linear-gradient(135deg,#B13D37,#f80) 20 20;

border-image: linear-gradient(135deg,#B13D37,#fd0,#fff) 20 20;
z-index:1;overflow: hidden;
}
.dong {
width: 1200px;
height: 268px;
overflow: hidden;
z-index:-1;

}
.dong ul {
width: 200%;
height: 100%;
animation: picmove 10s linear infinite forwards;
z-index:-2;
}
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-1190px);
}
}
.dong ul li{width: 250px;
height: 248px;
margin-right:15px;
/*border: 1px solid #ccf;*/
text-align:center;
float: left;}
.dong ul img {
padding:5px;

width: 240px;
height: 190px;
}
.dong ul span{color:#000; display:block; width:240px; height:20px; line-height:20px; text-align:center;}
.dong ul:hover {
animation-play-state: paused;
}
.dingd h2{font-size: 24px; color: #333333;}