Js圖片點(diǎn)擊切換輪播實(shí)現(xiàn)代碼
圖片點(diǎn)擊切換
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <script type='text/javascript'> window.onload=function(){var btn1=document.getElementById('pre');var btn2=document.getElementById('next');var img=document.getElementById('img1');var imgarr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg'];var index=0;var info=document.getElementById('pd'); info.innerHTML='一共'+imgarr.length+'張 圖片 ，當(dāng)前 第'+(index+1)+'張';btn1.onclick=function(){ index--; if(index<0){ index=imgarr.length-1; } img.src=imgarr[index]; info.innerHTML='一共'+imgarr.length+'張 圖片 ，當(dāng)前 第'+(index+1)+'張';};btn2.onclick=function(){ index++; if(index>imgarr.length-1){ index=0; } img.src=imgarr[in000dex]; info.innerHTML='一共'+imgarr.length+'張 圖片 ，當(dāng)前 第'+(index+1)+'張';}; }; </script> <style type='text/css'> *{padding: 0;margin:0; } .outer{width:640px;height:453px;margin:100px auto;text-align: center; } </style> </head> <body> <div class='outer'> <p id='pd'></p> <img src='http://m.cgvv.com.cn/bcjs/images/1.jpg' /> <button id='pre'>上一張</button> <button id='next'>下一張</button> </div> </body></html>
實(shí)現(xiàn)效果
輪播
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <style type='text/css'> *{padding:0px;margin: 0px; } #outer{position: relative;width:660px;height:425px;margin:50px auto ;background:yellow;padding:10px 0;overflow: hidden; } #imglist{position: absolute;list-style: none;/* * 設(shè)置偏移量 * * */left:0px; } #imglist li{margin: 0 10px;float:left; } #navDiv{position: absolute;bottom: 15px;/* * 設(shè)置left值 * outer寬度 640 * navDiv寬度 30*5=125 * 640-125=515 * 515/2=257.5 * left:257.5px; */left:0; } #navDiv a{float:left;width:20px;height:20px;background:#ff1;opacity: 0.5;/*兼容IE8的透明*/filter:alpha(opacity=50);margin: 0 5px; } #navDiv a:hover{background:red; } </style> <script type='text/javascript' src='http://m.cgvv.com.cn/bcjs/tools.js'></script> <script type='text/javascript'> window.onload=function(){var imglist=document.getElementById('imglist');var navDiv=document.getElementById('navDiv');var outer=document.getElementById('outer');//獲取頁(yè)面所有的img標(biāo)簽var imgarr=document.getElementsByTagName('img');//獲取頁(yè)面所有的A標(biāo)簽var allA=document.getElementsByTagName('a');//默認(rèn)顯示圖片的索引var index=0; //設(shè)置allA[index].style.background='black';//設(shè)置ul的長(zhǎng)度imglist.style.width=660*imgarr.length+'px';//設(shè)置navDiv的left值navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+'px'; //定義一個(gè)定時(shí)器標(biāo)識(shí)var timer;//點(diǎn)擊超鏈接切換到指定的圖片//為所有的超鏈接綁定單擊響應(yīng)函數(shù)for(var i=0;i<allA.length;i++){ //為每一個(gè)超鏈接都添加一個(gè)NUM屬性 allA[i].num=i; //為超鏈接綁定單擊響應(yīng)函數(shù) allA[i].onclick=function(){ //關(guān)閉自動(dòng)切換 clearInterval(timer); //獲取點(diǎn)擊超鏈接的索引，并將其設(shè)置為index index=this.num; //切換圖片 //imglist.style.left=index*-660+'px'; setA(); move(imglist,20,-660*index,'left',function(){ //動(dòng)畫(huà)執(zhí)行完后，再執(zhí)行自動(dòng)切換 autoChange(); }); };}//自動(dòng)切換圖片autoChange();//創(chuàng)建一個(gè)方法來(lái)設(shè)置選中的Afunction setA(){ //判斷是不是最后一張照片 if(index>=imgarr.length-1){ index=0; //如果是最后一張，就把imglist移到0 imglist.style.left=0+'px'; } for(var j=0;j<allA.length;j++){ //去掉內(nèi)聯(lián)樣式，只剩下樣式表的樣式 allA[j].style.background=''; } allA[index].style.background='black'; }; function autoChange(){ timer=setInterval(function(){ index++; index%=imgarr.length; move(imglist,20,-660*index,'left',function(){ setA(); }); },3000);}; }; </script> </head> <body> <!--創(chuàng)建一個(gè)外部的div，來(lái)作為大的容器--> <div id='outer'> <!--創(chuàng)建一個(gè)ul，用來(lái)放置圖片--> <ul id='imglist'><li> <img src='http://m.cgvv.com.cn/bcjs/images/1.jpg' /></li><li> <img src='http://m.cgvv.com.cn/bcjs/images/2.jpg' /></li><li> <img src='http://m.cgvv.com.cn/bcjs/images/3.jpg' /></li><li> <img src='http://m.cgvv.com.cn/bcjs/images/4.jpg' /></li><li> <img src='http://m.cgvv.com.cn/bcjs/images/5.jpg' /></li><li> <img src='http://m.cgvv.com.cn/bcjs/images/1.jpg' /></li> </ul> <div id='navDiv'><a href='javascript:;' 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' ></a><a href='javascript:;' 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' ></a><a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> </div> </div> </body></html>
tools.js
//動(dòng)畫(huà)函數(shù)/*參數(shù) * -1.obj 對(duì)象 * -2.speed 速度 * -3.target 執(zhí)行動(dòng)畫(huà)的目標(biāo) * -4.arrt 要變化的樣式 * -5.callback:回調(diào)函數(shù) 將會(huì)在動(dòng)畫(huà)執(zhí)行完后執(zhí)行 */ function move(obj,speed,target,arrt,callback){ //關(guān)閉上一次定時(shí)器 clearTimeout(obj.timer); //判斷速度的正負(fù)值 //如果從0向800移動(dòng)則為正 //如果從800向0移動(dòng)則為負(fù) var current=parseInt(getStyle(obj,arrt)); if(current>target){ speed=-speed; } //開(kāi)啟一個(gè)定時(shí)器 //為obj添加一個(gè)timer屬性，用來(lái)保存它1自己的定時(shí)器的標(biāo)識(shí) obj.timer=setInterval(function(){ //獲取原來(lái)的left值 var oldvalue=parseInt(getStyle(obj,arrt)); //在舊值的基礎(chǔ)上增加 var newvalue=oldvalue+speed; if(speed<0&&newvalue<target||speed>0&&newvalue>target) { newvalue=target; } obj.style[arrt]=newvalue+'px'; //當(dāng)元素到達(dá)target關(guān)閉定時(shí)器 if(newvalue===target||newvalue===target){ clearTimeout(obj.timer); //動(dòng)畫(huà)執(zhí)行完 執(zhí)行函數(shù) callback&&callback(); } },30);};
實(shí)現(xiàn)效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. idea設(shè)置提示不區(qū)分大小寫(xiě)的方法2. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法3. HTTP協(xié)議常用的請(qǐng)求頭和響應(yīng)頭響應(yīng)詳解說(shuō)明（學(xué)習(xí)）4. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建（ Dovecot ）5. IntelliJ IDEA創(chuàng)建web項(xiàng)目的方法6. .NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)7. docker容器調(diào)用yum報(bào)錯(cuò)的解決辦法8. VMware中如何安裝Ubuntu9. IntelliJ IDEA導(dǎo)入項(xiàng)目的方法10. django創(chuàng)建css文件夾的具體方法
網(wǎng)公網(wǎng)安備