文章詳情頁(yè)

基于JavaScript實(shí)現(xiàn)輪播圖效果

瀏覽：68日期：2023-06-11 13:01:56

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

學(xué)習(xí)筆記（學(xué)校的課設(shè)），實(shí)現(xiàn)了左右切換，按指示點(diǎn)切換、按小圖標(biāo)切換和自動(dòng)切換，但是還有某些功能沒完善，如：切換到某張圖片后，左右并沒有切換到前后相應(yīng)的圖片。

先看實(shí)現(xiàn)效果：

代碼僅供參考：

<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <style> .div0{ height: 100px; width: 100%; background-color:black; opacity:0.75; } .div1{ background-image: url(img/bg2.png); height: 400px; width: 100%; } .div2{ height: 200px; width: 100%; background-color:black; opacity:0.75; position: absolute; } .spot{ position: absolute; left: 10%; } .spot_list1{ float: left; border:3px solid wheat; transform:rotate(-30deg); -ms-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -o-transform:rotate(-30deg); opacity:0.5; } .spot_list2{ float: left; border:3px solid wheat; transform:rotate(-15deg); -ms-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); opacity:0.5; } .spot_list3{ float: left; border:3px solid wheat; transform:rotate(28deg); -ms-transform:rotate(28deg); -moz-transform:rotate(28deg); -webkit-transform:rotate(28deg); -o-transform:rotate(28deg); opacity:0.5; } .div1_1{ border: 10px solid gainsboro; width: 830px; height: 300px; left: 10%; top: 10%; position: relative; overflow: hidden; } .btn { width: 100%; height: 80px; position: absolute; margin: 0 auto; top: 120px; } .box_big { position: absolute; height: 400px; vertical-align: middle } #imgList{ list-style: none; position: absolute; } #imgList li{ float: left; margin: 0 10px; } .left_btn, .right_btn { width: 30px; height: 80px; background:gray; line-height: 90px; border-radius: 10px; } .left_btn { float: left; } .right_btn { float: right; } #navDiv{ position: absolute; left: 300px; } #navDiv a{ float: left; width: 15px; height: 15px; border-radius:50%; background-color: black; margin: 0 10px; opacity: 0.5; filter: alpha(opacity=50); } #navDiv a:hover{ background-color: red; } </style> </head> <body> <div class='div0'></div> <div class='div1'> <div class='div1_1'> <div id='navDiv'> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> </div> <div class='box_big'> <ul id='imgList'> <li><img src='http://www.intensediesel.com/bcjs/img/1.jpg' ></li> <li><img src='http://www.intensediesel.com/bcjs/img/2.jpg' id='2></li> <li><img src='http://www.intensediesel.com/bcjs/img/3.jpg' /></li> <li><img src='http://www.intensediesel.com/bcjs/img/4.jpg' /></li> <li><img src='http://www.intensediesel.com/bcjs/img/5.jpg' /></li> <li><img src='http://www.intensediesel.com/bcjs/img/6.jpg' /></li> </ul> </div> <div class='btn'> <div class='left_btn'><img src='http://www.intensediesel.com/bcjs/img/prev.png'></div> <div class='right_btn'><img src='http://www.intensediesel.com/bcjs/img/next.png'></div> </div> </div> </div>  <div onmouseleave='m1()'> <div class='spot'> <img src='http://www.intensediesel.com/bcjs/img/thumbs/1.jpg' onmouseover='mouseover(1)' onmouseout='mouseout(1)'> <img src='http://www.intensediesel.com/bcjs/img/thumbs/2.jpg' onmouseover='mouseover(2)' onmouseout='mouseout(2)'> <img src='http://www.intensediesel.com/bcjs/img/thumbs/3.jpg' onmouseover='mouseover(3)' onmouseout='mouseout(3)'> <img src='http://www.intensediesel.com/bcjs/img/thumbs/4.jpg' onmouseover='mouseover(4)' onmouseout='mouseout(4)'> <img src='http://www.intensediesel.com/bcjs/img/thumbs/5.jpg' onmouseover='mouseover(5)' onmouseout='mouseout(5)'> <img src='http://www.intensediesel.com/bcjs/img/thumbs/6.jpg' onmouseover='mouseover(6)' onmouseout='mouseout(6)'> </div> </div> </body> <script> var box=document.getElementById('1'); //var spot = document.getElementsByClassName('spot_list'); var left_btn=document.getElementsByClassName('left_btn')[0]; var right_btn=document.getElementsByClassName('right_btn')[0]; var time = null; var count = 0; var ids=document.getElementsByTagName('a'); ids[0].style.backgroundColor='red'; var spot_list1=document.getElementById('spot_list1'); spot_list1.setAttribute('class','spot_list3'); spot_list1.style.opacity='0.98'; //左按鈕 left_btn.onclick=function(){ count--; if(count<1){ count=6 } box.src='http://www.intensediesel.com/bcjs/img/' + count + '.jpg'; for(var i=0;i<ids.length;i++){ ids[i].style.backgroundColor='black'; } ids[count - 1].style.backgroundColor='red'; for(var i=1;i<=6;i++){ var img=document.getElementById('spot_list'+i); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.5'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list2'); img.style.opacity='0.5'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.5'; } } var img=document.getElementById('spot_list'+count); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.98'; } } //右按鈕 right_btn.onclick=function(){ changeImg(); } // var x=1; var changeImg = function(){ x++; if(x > 6){ x = 1; } box.src = 'http://www.intensediesel.com/bcjs/img/' + x + '.jpg'; for(var i=0;i<ids.length;i++){ ids[i].style.backgroundColor='black'; } ids[x - 1].style.backgroundColor='red'; for(var i=1;i<=6;i++){ var img=document.getElementById('spot_list'+i); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.5'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list2'); img.style.opacity='0.5'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.5'; } } var img=document.getElementById('spot_list'+x); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.98'; } } //設(shè)置計(jì)時(shí)器 var show; show=setInterval(changeImg, 3000); //圖片切換 function mouseover(n){ clearInterval(show); var img=document.getElementById('spot_list'+n); if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.98'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.98'; } box.src='http://www.intensediesel.com/bcjs/img/'+n+'.jpg'; for(var i=0;i<ids.length;i++){ ids[i].style.backgroundColor='black'; } ids[n-1].style.backgroundColor='red'; } for(let i=0;i<ids.length;i++){ ids[i].onclick=function(){ clearInterval(show); for(var n=0;n<ids.length;n++){ ids[n].style.backgroundColor='black'; } box.src='http://www.intensediesel.com/bcjs/img/'+(i+1)+'.jpg'; ids[i].style.backgroundColor='red'; } } //離開小圖標(biāo)時(shí) function mouseout(n){ var img=document.getElementById('spot_list'+n); ids[n-1].style.backgroundColor='black'; if(img.id=='spot_list1' || img.id=='spot_list4'){ img.setAttribute('class','spot_list1'); img.style.opacity='0.5'; }else if(img.id=='spot_list2' || img.id=='spot_list5'){ img.setAttribute('class','spot_list2'); img.style.opacity='0.5'; }else if(img.id=='spot_list3' || img.id=='spot_list6'){ img.setAttribute('class','spot_list3'); img.style.opacity='0.5'; } } function m1(){ //啟動(dòng)計(jì)時(shí)器 show=setInterval(changeImg, 3000); } </script></html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：原生JavaScript實(shí)現(xiàn)留言板下一條：基于JavaScript實(shí)現(xiàn)簡(jiǎn)單掃雷游戲

相關(guān)文章：

1. IDEA 2020.1.2 安裝教程附破解教程詳解2. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算3. Java利用TCP協(xié)議實(shí)現(xiàn)客戶端與服務(wù)器通信(附通信源碼)4. 使用AJAX（包含正則表達(dá)式）驗(yàn)證用戶登錄的步驟5. JS圖片懶加載庫(kù)VueLazyLoad詳解6. Java實(shí)現(xiàn)的迷宮游戲7. Python 解決火狐瀏覽器不彈出下載框直接下載的問題8. django queryset相加和篩選教程9. Java PreparedStatement用法詳解10. Spring如何集成ibatis項(xiàng)目并實(shí)現(xiàn)dao層基類封裝

排行榜

					
					Java利用TCP協(xié)議實(shí)現(xiàn)客戶端與服務(wù)器通信(附通信源碼)
利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算
Spring如何集成ibatis項(xiàng)目并實(shí)現(xiàn)dao層基類封裝
IntelliJ IDEA導(dǎo)出項(xiàng)目的方法
使用AJAX（包含正則表達(dá)式）驗(yàn)證用戶登錄的步驟
IDEA 2020.1.2 安裝教程附破解教程詳解
JS圖片懶加載庫(kù)VueLazyLoad詳解
django queryset相加和篩選教程
idea設(shè)置提示不區(qū)分大小寫的方法
Java PreparedStatement用法詳解
Java實(shí)現(xiàn)的迷宮游戲
				