溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“js怎么實現相冊翻頁，滾動，切換，輪播功能”，在日常操作中，相信很多人在js怎么實現相冊翻頁，滾動，切換，輪播功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”js怎么實現相冊翻頁，滾動，切換，輪播功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
1.相冊左右點擊翻頁功能
實現步驟
1.需要一個HTML標簽img，添加一張圖片。
2.然后需要添加一個js事件onmouseover，使每次鼠標移到圖片上指針都會隨左右發生變化。
3.***需要添加一個點擊事件，根據鼠標的在左邊還是右邊，判斷是應該上一頁還是下一頁翻動相冊。
HTML代碼:
<body> <div> <img src="img/pic1.jpg" id = "bigimg" onmouseover="upNext(this)" width="300" height="300"> </div> </body>
JS代碼:
<script type="text/javascript"> var arr = new Array(); arr[0] = "1.jpg"; arr[1] = "2.jpg"; arr[2] = "3.jpg"; arr[3] = "4.jpg"; arr[4] = "5.jpg"; var index = 0; function upNext(bigimg) { var action; var width = bigimg.width; var height = bigimg.height; bigimg.onmousemove = function () { if (window.event.offsetX < width / 2) { action = 'left' bigimg.style.cursor = 'url(img/arr_left.cur),auto';//將鼠標指針更換成向左指向箭頭 } else { bigimg.style.cursor = 'url(img/arr_right.cur),auto'; action = 'right'; } } bigimg.onmouseup = function () { if (action == 'left') { if(index==0) return ; else index--; } else { if(index == 4) return; else index ++ ; } this.src = 'img/pic'+arr[index]; } } </script>！！此處需要注意，有些瀏覽器并不兼容event事件。
2.自動切換功能
實現步驟:
1.首先還是需要一個img標簽，顯示一張圖片。
2.需要一個數組，記錄每張圖片的路徑，設置，跳轉間隔時間。
3.添加一個js方法，根據數組下標，更改圖片src。利用setInterval方法循環執行。
HTML:
<body> <img src="img/pic1.jpg" width="427" height="219" id="showpic" /> </body>
js:
<script language =javascript > var curIndex=0; //時間間隔 單位毫秒 var timeInterval=3000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; setInterval(changeImg,timeInterval);//每隔timeInterval時間，執行一次changeImg事件 function changeImg() { var obj=document.getElementById("showpic"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } obj.src="img/pic"+arr[curIndex]; } </script>3.循環滾動功能(右移)
實現步驟:
1.我們需要對html進行布局，將所有要顯示的圖片都放在一行以內。此處注意:行內所有圖片的寬度需大于外部容器的大小，否則不能達到預想效果。
2.設置滾動事件，寬度，滾動方向。此處注意,滾動速度，數字越大，滾動的越慢(每間隔一段時間執行，數字越大間隔時間越長，滾動速度越慢)；滾動的方向其實就是if else中的
簡單的邏輯判斷以及自增自減實現的。
3.第三部分，我們需要添加js事件，讓鼠標放到滾動圖片上時，時滾動終止；鼠標離開時，繼續滾動。
HTML:
!!此處添加需要展示的所有圖片。布局不僅限于table標簽，多種html標簽都能實現。
<div id=demo style="overflow:hidden;width: 300px; height: 100px;"> <table> <tr> <td id=demo1 valign=top> <table align=left cellpadding=0 cellspace=0 border=0> <tr> <td> <img src="img/jg.jpg"> </td> <td> <img src="img/fxz.jpg"> </td> <td> <img src="img/gh.jpg"> </td> <td> <img src="img/yj.jpg"> </td> <td> <img src="img/zzh.jpg"> </td> </tr> </table> </td> <td id=demo2 valign=top ><td> </tr> </table> </div>
js:
<script> var speed=30 ;//設置滾動速度 demo2.innerHTML=demo1.innerHTML ; demo.scrollLeft=demo.scrollWidth ; function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth; else{ demo.scrollLeft--; } } var MyMar=setInterval(Marquee,speed) ; demo.onmouseover=function() {clearInterval(MyMar);} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);} </script>4.相冊簡單輪播實現
實現步驟:
1.首先對html進行圖片布局，使得上面一個有一個大的img標簽，下面排列若干個小的img標簽。
2.我們需要添加兩個js事件，分別在鼠標移到小img標簽和移出小img標簽時產生效果。
3.在鼠標移到小img標簽上時，使大的img圖片src變化，并且使小img標簽的border屬性值顏色發生改變，在鼠標移出時顏色改變回來。
！！此處注意，大家需要使用簡單的css進行頁面的排版與裝飾，也可以躲在css上下些功夫，使頁面更漂亮。
HTML:
<body> <div><img src="img/pic1.jpg" width="320" height="300" id="bigimg"></div> <div> <ul> <li><img src="img/pic1.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> <li><img src="img/pic2.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> <li><img src="img/pic3.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> <li><img src="img/pic4.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> <li><img src="img/pic5.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> </ul> </div> </body>
js:
<script type="text/javascript"> function rep(obj){ document.getElementById("bigimg").src = obj.src ; obj.style.border = "2px solid blue" ; } function recover(obj){ obj.style.border = "2px solid black" ; } </script>到此，關于“js怎么實現相冊翻頁，滾動，切換，輪播功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
