js怎么實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能
這篇文章主要介紹“js怎么實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能”，在日常操作中，相信很多人在js怎么實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”js怎么實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
專業(yè)從事成都網(wǎng)站制作、網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),微信小程序,網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用H5場(chǎng)景定制+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。
1.相冊(cè)左右點(diǎn)擊翻頁(yè)功能
實(shí)現(xiàn)步驟
1.需要一個(gè)HTML標(biāo)簽img，添加一張圖片。
2.然后需要添加一個(gè)js事件onmouseover，使每次鼠標(biāo)移到圖片上指針都會(huì)隨左右發(fā)生變化。
3.***需要添加一個(gè)點(diǎn)擊事件，根據(jù)鼠標(biāo)的在左邊還是右邊，判斷是應(yīng)該上一頁(yè)還是下一頁(yè)翻動(dòng)相冊(cè)。
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';//將鼠標(biāo)指針更換成向左指向箭頭 } 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.自動(dòng)切換功能
實(shí)現(xiàn)步驟:
1.首先還是需要一個(gè)img標(biāo)簽，顯示一張圖片。
2.需要一個(gè)數(shù)組，記錄每張圖片的路徑，設(shè)置，跳轉(zhuǎn)間隔時(shí)間。
3.添加一個(gè)js方法，根據(jù)數(shù)組下標(biāo)，更改圖片src。利用setInterval方法循環(huán)執(zhí)行。
HTML:
<body> <img src="img/pic1.jpg" width="427" height="219" id="showpic" /> </body>
js:
<script language =javascript > var curIndex=0; //時(shí)間間隔 單位毫秒 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時(shí)間，執(zhí)行一次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.循環(huán)滾動(dòng)功能(右移)
實(shí)現(xiàn)步驟:
1.我們需要對(duì)html進(jìn)行布局，將所有要顯示的圖片都放在一行以內(nèi)。此處注意:行內(nèi)所有圖片的寬度需大于外部容器的大小，否則不能達(dá)到預(yù)想效果。
2.設(shè)置滾動(dòng)事件，寬度，滾動(dòng)方向。此處注意,滾動(dòng)速度，數(shù)字越大，滾動(dòng)的越慢(每間隔一段時(shí)間執(zhí)行，數(shù)字越大間隔時(shí)間越長(zhǎng)，滾動(dòng)速度越慢)；滾動(dòng)的方向其實(shí)就是if else中的
簡(jiǎn)單的邏輯判斷以及自增自減實(shí)現(xiàn)的。
3.第三部分，我們需要添加js事件，讓鼠標(biāo)放到滾動(dòng)圖片上時(shí)，時(shí)滾動(dòng)終止；鼠標(biāo)離開時(shí)，繼續(xù)滾動(dòng)。
HTML:
!!此處添加需要展示的所有圖片。布局不僅限于table標(biāo)簽，多種html標(biāo)簽都能實(shí)現(xiàn)。
<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 ;//設(shè)置滾動(dòng)速度 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.相冊(cè)簡(jiǎn)單輪播實(shí)現(xiàn)
實(shí)現(xiàn)步驟:
1.首先對(duì)html進(jìn)行圖片布局，使得上面一個(gè)有一個(gè)大的img標(biāo)簽，下面排列若干個(gè)小的img標(biāo)簽。
2.我們需要添加兩個(gè)js事件，分別在鼠標(biāo)移到小img標(biāo)簽和移出小img標(biāo)簽時(shí)產(chǎn)生效果。
3.在鼠標(biāo)移到小img標(biāo)簽上時(shí)，使大的img圖片src變化，并且使小img標(biāo)簽的border屬性值顏色發(fā)生改變，在鼠標(biāo)移出時(shí)顏色改變回來。
??！此處注意，大家需要使用簡(jiǎn)單的css進(jìn)行頁(yè)面的排版與裝飾，也可以躲在css上下些功夫，使頁(yè)面更漂亮。
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>到此，關(guān)于“js怎么實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
本文名稱：js怎么實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能
本文來源：http://jinyejixie.com/article40/pdccho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、域名注冊(cè)、企業(yè)建站、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 介紹幾個(gè)國(guó)外域名注冊(cè)網(wǎng)站 2022-07-06
- 企業(yè)網(wǎng)站域名注冊(cè)常見問題 2015-09-28
- 不得不知道的域名注冊(cè)規(guī)則 2021-01-31
- .vip域名注冊(cè)優(yōu)勢(shì)在哪 2022-07-11
- 域名注冊(cè)也有風(fēng)險(xiǎn) 網(wǎng)站建設(shè)時(shí)應(yīng)慎重選擇網(wǎng)絡(luò)公司 2022-05-14
- 成都企業(yè)網(wǎng)站建設(shè)過程中域名注冊(cè)很重要 2016-12-31
- 域名注冊(cè)如何選擇域名服務(wù)商 2022-08-02
- 關(guān)于選擇便宜域名注冊(cè)商的技巧 2021-11-11
- 深圳網(wǎng)站制作中域名注冊(cè)的問題 2021-05-02
- 如何保護(hù)注冊(cè)域名？保護(hù)域名不被別人搶注 2017-03-10
- 注冊(cè)域名需要注意什么 2016-09-15
- 網(wǎng)站域名注冊(cè)注意事項(xiàng) 2022-06-15