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

就是鼠标一上去停止，鼠标拿走，又继续动的，... 就是鼠标一上去停止，鼠标拿走，又继续动的，展开

 我来答

6个回答

#热议# 不吃早饭真的会得胆结石吗？

贪恋迩的香吻
推荐于2017-09-12 · TA获得超过2.1万个赞

知道大有可为答主

回答量：3485

采纳率：79%

帮助的人：409万

我也去答题访问个人页

关注

展开全部

你好！CSS实现不了，配合JS才行
代码如下：
<style type="text/css">

</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>

</script>

已赞过 已踩过<

评论收起

武汉市江夏区楚晟通建材..

广告2024-11-13

网站设计与网站制作，为您量身定制，打造独特风格!，让您的网站设计与网站制作更具吸引力!

qianhu.wejianzhan.com

依然幻吟枫
推荐于2017-09-13 · TA获得超过433个赞

知道小有建树答主

回答量：197

采纳率：0%

帮助的人：133万

我也去答题访问个人页

关注

展开全部

CSS实现不了，配合JS才行

<style type="text/css">

</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>

</script>

追问

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

追答

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

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

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

已赞过 已踩过<

评论收起

百度网友faadf46

高粉答主

2020-05-01 · 说的都是干货，快来关注

知道答主

回答量：4556

采纳率：0%

帮助的人：69万

我也去答题访问个人页

关注

展开全部

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保存后，使用浏览器打开预览效果。

本回答被网友采纳

已赞过 已踩过<

评论收起

努力路过的酱油
2012-06-24

知道答主

回答量：1

采纳率：0%

帮助的人：1601

我也去答题访问个人页

关注

展开全部

已赞过 已踩过<

评论收起

金硕奥秘
2020-08-21 · 走进五彩缤纷的自然科学世界。

金硕奥秘

采纳数：120 获赞数：235

向TA提问私信TA

关注

展开全部

<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;}