當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript实现轮播图

發(fā)布時(shí)間：2025/3/20 javascript 12 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript实现轮播图小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

功能：

1、圖片會自動播放，鼠標(biāo)放上面會暫停播放

2、點(diǎn)擊左右出現(xiàn)的箭頭可以切換到上一張/下一張圖片

3、點(diǎn)擊序號會跳轉(zhuǎn)到對應(yīng)圖片?

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>當(dāng)當(dāng)網(wǎng)首頁輪播圖-By小黑</title><style>*{padding: 0;margin: 0;list-style: none;}#wrap{margin: 50px auto;width: 800px;height: 330px;overflow: hidden;position: relative;}#list{position: absolute;bottom: 15px;right: 250px;}#list li{float: left;margin-right: 15px;cursor: pointer;width: 23px;height: 23px;line-height: 23px;text-align: center;background: #ADA79D;color: #FFF ;border-radius: 50%;}#list .on{background: red;}#bar_left,#bar_right{width: 33px;height: 80px;line-height: 80px;position: absolute;top: 130px;background: rgba(0, 0, 0, 0.3);}#bar_left{left: -33px;}#bar_right{right: -35px;}/*下面利用偽元素實(shí)現(xiàn)左側(cè)和右側(cè)的小箭頭*/#bar_left:after,#bar_left:before,#bar_right:before,#bar_right:after{content: "";border-top: 15px solid transparent;border-bottom: 15px solid transparent;position: absolute;top: 25px;}/*左邊箭頭*/#bar_left:before{border-left: 15px solid transparent;border-right: 15px solid #FFF;right: 10px;}#bar_left:after{border-left: 15px solid transparent;border-right: 15px solid rgba(0, 0, 0, 0.3);right: 7px;}/*右邊箭頭*/#bar_right:before{border-right: 15px solid transparent;border-left: 15px solid #FFF;left: 10px;}#bar_right:after{border-right: 15px solid transparent;border-left: 15px solid rgba(0, 0, 0, 0.3);left: 7px;}#wrap:hover #bar_left{left: 0;cursor: pointer;transition: left 0.5s;}#wrap:hover #bar_right{/* display: block; */right: 5px;cursor: pointer;transition: right 0.5s;}.tex{margin: 20px auto;width: 400px;}.tex ul li{list-style-type:circle;color: red;font-weight: bold;margin-bottom: 5px;}</style> </head><body><div id="wrap"><ul id="pic"><li><img src="images/dang1.jpg" alt=""></li><li><img src="images/dang2.jpg" alt=""></li><li><img src="images/dang3.jpg" alt=""></li><li><img src="images/dang4.jpg" alt=""></li><li><img src="images/dang5.jpg" alt=""></li><li><img src="images/dang6.jpg" alt=""></li><li><img src="images/dang7.jpg" alt=""></li><li><img src="images/dang8.jpg" alt=""></li></ul><div id="bar_left"></div><div id="bar_right"></div><ol id="list"><li class="on">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ol></div><div class="tex"><ul><li>功能如下：</li><li>圖片會自動播放，鼠標(biāo)放上面會暫停播放</li><li>點(diǎn)擊左右出現(xiàn)的箭頭可以切換到上一張/下一張圖片</li><li>點(diǎn)擊序號會跳轉(zhuǎn)到對應(yīng)圖片</li></ul></div><script>var wrap=document.getElementById('wrap');var pics=document.getElementById('pic');var lists=document.getElementById('list').getElementsByTagName('li');var point_l=document.getElementById('bar_left');var point_r=document.getElementById('bar_right');var index=0;var counter=null;function change(){//計(jì)時(shí)器counter=setInterval(function(){index++;if(index===lists.length){index=0;}img(index);},2000)}change();function img(curIndex){//切換圖片for (var i=0;i<lists.length;i++){if(curIndex===i){lists[i].className='on';}else{lists[i].className='';}}index=curIndex;pics.style.marginTop=-330*curIndex+'px';//圖片上移wrap.onmouseover=function(){//鼠標(biāo)放到圖片上時(shí)圖片停止播放pics.style.cursor="pointer";clearInterval(counter);//清除計(jì)時(shí)器}pics.onmouseout=change;}//鼠標(biāo)放到指定序號切換到指定圖片for (var i=0;i<lists.length;i++){lists[i].id=i;lists[i].onmouseover=function(){img(this.id);this.className='on';}}//當(dāng)鼠標(biāo)放在箭頭上時(shí)，點(diǎn)擊箭頭切換到下一張圖片point_l.onmousedown=function(){//點(diǎn)擊左邊箭頭if(index<=0){index=lists.length;}img(index-1);}point_r.onmousedown=function(){//點(diǎn)擊右邊箭頭if (index>=lists.length-1){index=-1;}img(index+1);}</script> </body></html>

效果圖

總結(jié)

以上是生活随笔為你收集整理的JavaScript实现轮播图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。