JavaScript實現輪播圖特效
本文實例為大家分享了JavaScript實現輪播圖特效的具體代碼，供大家參考，具體內容如下
功能：
1、圖片會自動播放，鼠標放上面會暫停播放
2、點擊左右出現的箭頭可以切換到上一張/下一張圖片
3、點擊序號會跳轉到對應圖片
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <title>當當網首頁輪播圖-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; } /*下面利用偽元素實現左側和右側的小箭頭*/ #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='http://www.aoyou183.cn/bcjs/images/dang1.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/images/dang2.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/images/dang3.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/images/dang4.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/images/dang5.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/images/dang6.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/images/dang7.jpg' alt=''></li> <li><img src='http://www.aoyou183.cn/bcjs/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>圖片會自動播放，鼠標放上面會暫停播放</li> <li>點擊左右出現的箭頭可以切換到上一張/下一張圖片</li> <li>點擊序號會跳轉到對應圖片</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(){//計時器 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.οnmοuseοver=function(){//鼠標放到圖片上時圖片停止播放 pics.style.cursor='pointer'; clearInterval(counter);//清除計時器 } pics.οnmοuseοut=change; } //鼠標放到指定序號切換到指定圖片 for (var i=0;i<lists.length;i++){ lists[i].id=i; lists[i].οnmοuseοver=function(){ img(this.id); this.className=’on’; } } //當鼠標放在箭頭上時，點擊箭頭切換到下一張圖片 point_l.οnmοusedοwn=function(){//點擊左邊箭頭 if(index<=0){ index=lists.length; } img(index-1); } point_r.οnmοusedοwn=function(){//點擊右邊箭頭 if (index>=lists.length-1){ index=-1; } img(index+1); } </script></body> </html>
效果圖
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備