用<marquee/>标签实现，html代码示例如下
<html><head>
<title>文字滚动示例</title>
</head>
<body>
<div>
水平滚动：
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滚动字幕内容</marquee>
</div>
<div>
垂直滚动：
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滚动字内容</marquee>
</div>
</body>
</html>
<script>window.onload = function(){ //页面加载完成执行
var images = document.getElementsByTagName('img')//取得所有img图片
var pos = 0//定义pos变量初始值=0
var len = images.length//取得图片个数
setInterval(function(){//定每1秒时执行
images[pos].style.display = 'none'//第一个图片隐藏,
pos = ++pos == len ? 0 : pos//pos在图片个数范围内递增
images[pos].style.display = 'inline'//下一个图片显示
},1000)
}
</script>
Html网页显示js轮播图
<div class="top-image">
<div class="loopImage">
<!--轮播图js文件-->
<!-- <script src="js/jquery-1.8.3.min.js"></script>-->
<script src="js/jquery.luara.0.0.1.min.js"></script>
<script>
$(
function
(){
/* <!--调用Luara-->*/
$(
".example").luara({width:"980",height:"291",interval:2500,selected:"seleted",deriction:"left"}) })
</script>
<!--Luara图片切换骨架begin-->
<div class="example" style="position: absolutetop: 142px"><ul><li><img
src="images/lbt01.jpg" width="980" height="291" alt="1"/></li>
<li><img src="images/lbt02.jpg" width="980" height="291" alt="2"/>
</li> <li><img src="images/lbt03.jpg" width="980" height="291" alt="3"/></li>
<li><img src="images/lbt04.jpg" width="980" height="291" alt="4"/></li>
</ul><ol><li></li><li></li><li></li><li></li></ol></div>
<!--Luara
图片切换骨架
end-->
</div></div>
.top-menu
{height:43px
margin-bottom:2px
}
我文库有清晰的代码，你把文字链接放在那个img的<li标签里。>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）