js實(shí)現(xiàn)相冊(cè)翻頁(yè)，滾動(dòng)，切換，輪播功能
我們?cè)谧鰓eb開發(fā)的時(shí)候，前臺(tái)的效果要求是很高的，因?yàn)閷?duì)于不懂程序的用戶來說，前臺(tái)的視覺沖擊，無疑是對(duì)我們產(chǎn)品的***印象。
在完成web圖片各種功能上，很多框架有很絢麗的效果，但今天我們來看看用原生的js如何簡(jiǎn)單的實(shí)現(xiàn)這些功能。歡迎大家交流指正。
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事件。
#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:
- <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>
#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)。
- <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>
#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í)顏色改變回來。
?。〈颂幾⒁猓蠹倚枰褂煤?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:
