html怎么设置滚动图片?

html怎么设置滚动图片?,第1张

方案一:直接使用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 :完成整个效果的时间


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6204500.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存