JavaScript實(shí)現(xiàn)輪播圖特效
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)輪播圖特效的具體代碼，供大家參考，具體內(nèi)容如下
功能：
1、圖片會(huì)自動(dòng)播放，鼠標(biāo)放上面會(huì)暫停播放
2、點(diǎn)擊左右出現(xiàn)的箭頭可以切換到上一張/下一張圖片
3、點(diǎn)擊序號(hào)會(huì)跳轉(zhuǎn)到對(duì)應(yīng)圖片
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <title>當(dāng)當(dāng)網(wǎng)首頁(yè)輪播圖-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='http://m.lshqa.cn/bcjs/images/dang1.jpg' alt=''></li> <li><img src='http://m.lshqa.cn/bcjs/images/dang2.jpg' alt=''></li> <li><img src='http://m.lshqa.cn/bcjs/images/dang3.jpg' alt=''></li> <li><img src='http://m.lshqa.cn/bcjs/images/dang4.jpg' alt=''></li> <li><img src='http://m.lshqa.cn/bcjs/images/dang5.jpg' alt=''></li> <li><img src='http://m.lshqa.cn/bcjs/images/dang6.jpg' alt=''></li> <li><img src='http://m.lshqa.cn/bcjs/images/dang7.jpg' alt=''></li> <li><img src='http://m.lshqa.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>圖片會(huì)自動(dòng)播放，鼠標(biāo)放上面會(huì)暫停播放</li> <li>點(diǎn)擊左右出現(xiàn)的箭頭可以切換到上一張/下一張圖片</li> <li>點(diǎn)擊序號(hào)會(huì)跳轉(zhuǎn)到對(duì)應(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.οnmοuseοver=function(){//鼠標(biāo)放到圖片上時(shí)圖片停止播放 pics.style.cursor='pointer'; clearInterval(counter);//清除計(jì)時(shí)器 } pics.οnmοuseοut=change; } //鼠標(biāo)放到指定序號(hào)切換到指定圖片 for (var i=0;i<lists.length;i++){ lists[i].id=i; lists[i].οnmοuseοver=function(){ img(this.id); this.className=’on’; } } //當(dāng)鼠標(biāo)放在箭頭上時(shí)，點(diǎn)擊箭頭切換到下一張圖片 point_l.οnmοusedοwn=function(){//點(diǎn)擊左邊箭頭 if(index<=0){ index=lists.length; } img(index-1); } point_r.οnmοusedοwn=function(){//點(diǎn)擊右邊箭頭 if (index>=lists.length-1){ index=-1; } img(index+1); } </script></body> </html>
效果圖
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法2. IntelliJ IDEA設(shè)置背景圖片的方法步驟3. Spring security 自定義過(guò)濾器實(shí)現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實(shí)例代碼)4. docker /var/lib/docker/aufs/mnt 目錄清理方法5. JAMon(Java Application Monitor)備忘記6. Python TestSuite生成測(cè)試報(bào)告過(guò)程解析7. Python 的 __str__ 和 __repr__ 方法對(duì)比8. 學(xué)python最電腦配置有要求么9. Python Scrapy多頁(yè)數(shù)據(jù)爬取實(shí)現(xiàn)過(guò)程解析10. Python OpenCV去除字母后面的雜線操作
網(wǎng)公網(wǎng)安備