JavaScript如何通过改变background的图片链接来实现轮播图效果
导读:本文共847.5字符,通常情况下阅读需要3分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: Js实现轮播图实现思路这可能是轮播图最简单点的实现之一,通过改变background的图片链接来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg…,再通过js使用定时器去改变background属性里面的url()图片链接的名字来实现切换效果。代码如下:实现效果<!DOCTYPEhtml><html>&... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。Js实现轮播图
实现思路
这可能是轮播图最简单点的实现之一,通过改变background的图片链接来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg…,再通过js使用定时器去改变background属性里面的url()图片链接的名字来实现切换效果。代码如下:
实现效果
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>轮播图实现</title><style>body{margin:0;padding:0;}.lunbo{width:100%;height:720px;background-image:url(pic/img1.jpeg);/*背景图片*/background-size:100%100%;}</style></head><body><divclass="lunbo"></div><scripttype="text/javascript">varindex=1;functionlunbo(){index++;//判断number是否大于3if(index>3){index=1;}//获取img对象varimg=document.getElementsByClassName("lunbo")[0];img.style.background="url(pic/img"+index+".jpeg)";img.style.backgroundSize="100%100%";}//2.定义定时器setInterval(lunbo,3000);</script></body></html>
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
JavaScript如何通过改变background的图片链接来实现轮播图效果的详细内容,希望对您有所帮助,信息来源于网络。