方案一:直接使用HTML的滚动标签 marquee ,把图片放入滚滚标签内部,代码如下:
<marquee>
<img src='1.jpg'>
<img src='2.jpg'>
<img src='3.jpg'>
<img src='4.jpg'>
</marquee>
方案二:使用第三方插件,比如swiper.js,
插件
活动字幕,也称为滚动看板、滚动字幕。活动字幕的使用使得整个网页更有动感,显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。用Javascript编程可以实现活动字幕效果;用Dreamweaver的图层再用其时间线功能可以做出非常漂亮的滚动看板。而用HTML的<marquee>活动字幕标记所需的代码最少,确实能够以较少的下载时间换来较好的效果。该标记语法格式如下:<marquee
aligh=left|center|right|top|bottom
bgcolor=#n
direction=left|right|up|down
behavior=type
height=n
hspace=n
scrollamount=n
Scrolldelay=n
width=n
VSpace=n
loop=n>
数字实现滚动的效果<span id="num1">1000</span>
<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
<script type="text/javascript">
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
}
var num1 = new CountUp('num1', 0, 1000, 0, 2.5, options)
if (!num1.error) {
num1.start()
} else {
console.error(num1.error)
}
</script>
//num1:目标元素的ID
//0:滚动开始的数字
//100:滚动结束的数字
//2.5 :完成整个效果的时间
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)