展开全部
你好！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>
代码如下：
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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>
<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后面的变量有没有冲突的
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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保存后，使用浏览器打开预览效果。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<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;}
<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;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
