如何用js实现一个横向滚动新闻？补充里已附图。求详细代码，不要太复杂的。最好使用div不要用table
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用js实现一个横向滚动新闻？补充里已附图。求详细代码，不要太复杂的。最好使用div不要用table相关的知识，希望对你有一定的参考价值。
简单的你可以使用<marquee></marquee>这个标签，把你的DIV保函进去可以设置滚动方向速度，但是效果不太好，你要效果更好的无缝滚动的，百度搜索superslide2，第一个，这个插件有很多效果，用起来也很简单 参考技术A 最简单的
<marquee width="300">如何用js实现一个横向滚动新闻</marquee>
js版的
<style>
#demowidth:300px;margin:0 auto; overflow:hidden
#indemowidth:300%
#demo1width:300px; float:left
#demo2width:300px; float:left
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">如何用js实现一个横向滚动新闻</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=10;//数字越大越慢
var demo=document.getElementById("demo")
var demo1=document.getElementById("demo1")
var demo2=document.getElementById("demo2")
demo2.innerHTML=demo1.innerHTML;
function marquee()
if(demo.scrollLeft>=demo1.offsetWidth)
demo.scrollLeft=0
else
demo.scrollLeft++
setInterval(marquee,speed)
</script>追问
我在demo1中放了多个div ，这些div的样式写的css都不起作用。这个怎么弄？
还有demo1 demo2 稍微用1600px然后就变成两行滚动了~
css不起作用？ 检查下看你写错了没
demo1的宽度要大于或等于demo的宽度它才会滚动，例如，你的demo的宽度设为980px；demo1的宽度必须大于或等于980px
嗯。检查过了，css不起作用。还有就是demo1的宽度太大的话滚动就会变成两行~
追答没给高度当然会变两行了，给demo个高度啊，我只是给个例子，你该加的还是要加的，该改的还是要改的
追问该加该改的都弄了 0.0 可是还是不行，可能我哪里搞错了。你留个Q我找时间加你详聊、
追答QQ457375608
本回答被提问者采纳 参考技术B 很简单的，但是如果要传值到服务端加1，就要考虑第一次加载、取出按钮id的控件在该事件里面取出文本框控件id的值，一直不断加1是可以实现的，其实还有很多方法1，还是点击提交的问题，添加onclick事件2，上面的思路是完全在前台做，加1就可以了。
案例如何用jquery实现仿百度新闻焦点图
像这样滚动的新闻焦点图如何实现？
代码如下
<!doctype html>
<html>
<head>
<script ></script>
<style>
body,dl,dd{margin:0;}
.container{width:480px;height:300px;overflow:hidden;position:relative;}
.container img{float:left;}
.container dl{background-image:none;position:absolute;bottom:0;left:0;width:98%;height:30px;line-height:30px;color:white;padding-left:2%}
.arrow_left,.arrow_right{display:block;width:41px;height:41px;position:absolute;top:50%;margin-top:-20px;cursor:pointer;}
.arrow_left{background-image:none;left:0;}
.arrow_right{background-image:none;right:0;}
</style>
<meta charset="utf-8">
<title>仿百度新闻焦点图</title>
</head>
<body>
<div class="container">
<img >
<img >
<img >
<img >
<img >
<img >
<dl>
<dd>新闻文本显示区-第1条新闻</dd>
<dd>新闻文本显示区-第2条新闻</dd>
<dd>新闻文本显示区-第3条新闻</dd>
<dd>新闻文本显示区-第4条新闻</dd>
<dd>新闻文本显示区-第5条新闻</dd>
<dd>新闻文本显示区-第6条新闻</dd>
</dl>
<span class="arrow_left" onselectstart="return false"></span>
<span class="arrow_right" onselectstart="return false"></span>
</div>
<script>
/*初始*/
$(".container img,.container dd").hide();
$(".container img:eq(0),.container dd:eq(0)").show();
/*定时器函数*/
var n = 0;
function changeImg(){
if(n<$(".container img").length-1){
n=n+1;
}else{
n=0;
}
$(".container img,.container dd").hide();
$(".container img:eq("+n+"),.container dd:eq("+n+")").show();
}
var timer = setInterval(changeImg,2000);
$(".container").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(changeImg,2000);
})
/*箭头控制*/
$(".arrow_left").click(function(){
if(n>0){n=n-1}else{n=$(".container img").length-1}
$(".container img,.container dd").hide();
$(".container img:eq("+n+"),.container dd:eq("+n+")").show();
})
$(".arrow_right").click(function(){
if(n<$(".container img").length-1){n=n+1;}else{n=0}
$(".container img,.container dd").hide();
$(".container img:eq("+n+"),.container dd:eq("+n+")").show();
})
</script>
</body>
</html>
希望大家看过我的案例分享后能有所收获。如果大家喜欢哪类效果，还想看哪方面的哪类型的设计制作案例可以留言给我，有时间我一定会分享更多设计制作相关的内容给大家的。谢谢！
时刻提醒自己
不抱怨，多实践，终达成功彼岸！
我的座右铭：不能领跑也绝不放弃！
以上是关于如何用js实现一个横向滚动新闻？补充里已附图。求详细代码，不要太复杂的。最好使用div不要用table的主要内容，如果未能解决你的问题，请参考以下文章