自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

js實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能

開發(fā) 前端
我們?cè)谧鰓eb開發(fā)的時(shí)候，前臺(tái)的效果要求是很高的，因?yàn)閷?duì)于不懂程序的用戶來(lái)說(shuō)，前臺(tái)的視覺(jué)沖擊，無(wú)疑是對(duì)我們產(chǎn)品的第一印象。

我們?cè)谧鰓eb開發(fā)的時(shí)候，前臺(tái)的效果要求是很高的，因?yàn)閷?duì)于不懂程序的用戶來(lái)說(shuō)，前臺(tái)的視覺(jué)沖擊，無(wú)疑是對(duì)我們產(chǎn)品的***印象。

在完成web圖片各種功能上，很多框架有很絢麗的效果，但今天我們來(lái)看看用原生的js如何簡(jiǎn)單的實(shí)現(xiàn)這些功能。歡迎大家交流指正。

js實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能

 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代碼:

  1. <body> 
  2.         <div> 
  3.             <img src="img/pic1.jpg" id = "bigimg" onmouseover="upNext(this)" width="300" height="300"> 
  4.         </div> 
  5. </body> 

JS代碼: 

  1. <script type="text/javascript"> 
  2.  
  3.             var arr = new Array(); 
  4.             arr[0] = "1.jpg"; 
  5.             arr[1] = "2.jpg"; 
  6.             arr[2] = "3.jpg"; 
  7.             arr[3] = "4.jpg"; 
  8.             arr[4] = "5.jpg"; 
  9.             var index = 0; 
  10.             function upNext(bigimg) { 
  11.             var action; 
  12.             var width = bigimg.width; 
  13.             var height = bigimg.height; 
  14.             bigimg.onmousemove = function () { 
  15.                 if (window.event.offsetX < width / 2) { 
  16.                     action = 'left' 
  17.                     bigimg.style.cursor = 'url(img/arr_left.cur),auto';//將鼠標(biāo)指針更換成向左指向箭頭 
  18.                 }  
  19.                 else { 
  20.                     bigimg.style.cursor = 'url(img/arr_right.cur),auto'; 
  21.                     action = 'right'; 
  22.                 } 
  23.             } 
  24.             bigimg.onmouseup = function () { 
  25.                 if (action == 'left') { 
  26.                    if(index==0) 
  27.                        return ; 
  28.                    else 
  29.                        index--; 
  30.                 } 
  31.                 else { 
  32.                   if(index == 4) 
  33.                     return; 
  34.                   else 
  35.                       index ++ ; 
  36.                 } 
  37.                 this.src = 'img/pic'+arr[index]; 
  38.             } 
  39.         } 
  40.         </script> 

 ??！此處需要注意，有些瀏覽器并不兼容event事件。

#p#

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:

  1. <body> 
  2.         <img src="img/pic1.jpg" width="427" height="219" id="showpic" /> 
  3. </body> 

js:

 
  1. <script language =javascript > 
  2.         var curIndex=0; 
  3.         //時(shí)間間隔 單位毫秒 
  4.         var timeInterval=3000; 
  5.         var arr=new Array(); 
  6.         arr[0]="1.jpg"; 
  7.         arr[1]="2.jpg"; 
  8.         arr[2]="3.jpg"; 
  9.         arr[3]="4.jpg"; 
  10.         arr[4]="5.jpg"; 
  11.         setInterval(changeImg,timeInterval);//每隔timeInterval時(shí)間，執(zhí)行一次changeImg事件 
  12.         function changeImg() 
  13.         { 
  14.             var obj=document.getElementById("showpic"); 
  15.             if (curIndex==arr.length-1) 
  16.             { 
  17.                 curIndex=0; 
  18.             } 
  19.             else 
  20.             { 
  21.                 curIndex+=1; 
  22.             } 
  23.             obj.src="img/pic"+arr[curIndex]; 
  24.         } 
  25.     </script> 
 

 #p#

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)。

 
  1. <div id=demo style="overflow:hidden;width: 300px; height: 100px;"> 
  2.             <table> 
  3.                 <tr> 
  4.                     <td id=demo1 valign=top> 
  5.                         <table align=left cellpadding=0 cellspace=0 border=0> 
  6.                             <tr> 
  7.                                 <td> 
  8.                                     <img src="img/jg.jpg"> 
  9.                                 </td> 
  10.                                 <td> 
  11.                                     <img src="img/fxz.jpg"> 
  12.                                 </td> 
  13.                                 <td> 
  14.                                     <img src="img/gh.jpg"> 
  15.                                 </td> 
  16.                                 <td> 
  17.                                     <img src="img/yj.jpg"> 
  18.                                 </td> 
  19.                                 <td> 
  20.                                     <img src="img/zzh.jpg"> 
  21.                                 </td> 
  22.                             </tr> 
  23.                         </table> 
  24.                     </td> 
  25.                     <td id=demo2 valign=top ><td> 
  26.                 </tr> 
  27.             </table> 
  28.         </div> 
 

js:

 
  1. <script>  
  2.             var speed=30 ;//設(shè)置滾動(dòng)速度 
  3.             demo2.innerHTML=demo1.innerHTML ; 
  4.             demo.scrollLeft=demo.scrollWidth ; 
  5.             function Marquee(){  
  6.                 if(demo.scrollLeft<=0)  
  7.                 demo.scrollLeft+=demo2.offsetWidth;  
  8.                 else{  
  9.                     demo.scrollLeft--;  
  10.                 }  
  11.             }  
  12.             var MyMar=setInterval(Marquee,speed) ; 
  13.             demo.onmouseover=function() {clearInterval(MyMar);}  
  14.             demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}  
  15. </script> 
 

#p#

 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í)顏色改變回來(lái)。

??！此處注意，大家需要使用簡(jiǎn)單的css進(jìn)行頁(yè)面的排版與裝飾，也可以躲在css上下些功夫，使頁(yè)面更漂亮。

HTML:

 
  1. <body> 
  2.         <div><img src="img/pic1.jpg" width="320" height="300" id="bigimg"></div> 
  3.         <div> 
  4.             <ul> 
  5.                 <li><img src="img/pic1.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
  6.                 <li><img src="img/pic2.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
  7.                 <li><img src="img/pic3.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
  8.                 <li><img src="img/pic4.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
  9.                 <li><img src="img/pic5.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> 
  10.             </ul> 
  11.         </div> 
  12. </body> 
 

js:

潮平帆遠(yuǎn)，擊水三千
 
責(zé)任編輯：王雪燕
js相冊(cè)翻頁(yè)
相關(guān)推薦

2018-04-16 14:39:10

Vue輪播切換

2020-06-15 18:00:36

transformbannerJavascript

2021-06-18 10:12:09

JS代碼前端

2016-12-01 09:24:56

Android

2009-06-16 10:44:50

JS代碼折疊Visual Stud

2012-05-04 14:16:41

JavaScript

2011-09-02 10:14:10

JQuery滾動(dòng)Xslider

2022-06-16 09:55:58

css輪播圖

2015-09-30 09:21:55

ios相冊(cè)moment功能優(yōu)化

2010-08-18 09:03:46

jQueryJSONTrimpath

2021-08-27 08:38:10

CSS 技巧 resize

2009-09-08 14:21:38

CheckBox翻頁(yè)選

2022-03-07 14:58:10

ArkUIJS FAJava

2022-07-28 14:26:11

AI作詩(shī)應(yīng)用開發(fā)

2015-12-15 15:31:08

Chrome平滑滾動(dòng)瀏覽器

2023-08-08 14:31:42

輪播圖鴻蒙

2013-04-02 13:04:07

ListView平滑滾

2024-03-20 09:40:27

動(dòng)畫技巧CSS逐幀動(dòng)畫

2016-03-31 11:28:21

imageView圖片輪播

2022-09-19 19:16:42

輪播圖has
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)