Js圖片點擊切換輪播實現(xiàn)代碼
更新時間：2020年07月27日 15:35:29 作者：-零
這篇文章主要介紹了Js圖片點擊切換輪播實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
圖片點擊切換
<!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="images/1.jpg" id="img1" />
<button id="pre">上一張</button>
<button id="next">下一張</button>
</div>
</body>
</html>
實現(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="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");
//獲取頁面所有的img標(biāo)簽
var imgarr=document.getElementsByTagName("img");
//獲取頁面所有的A標(biāo)簽
var allA=document.getElementsByTagName("a");
//默認(rèn)顯示圖片的索引
var index=0;
//設(shè)置
allA[index].style.background="black";
//設(shè)置ul的長度
imglist.style.width=660*imgarr.length+"px";
//設(shè)置navDiv的left值
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
//定義一個定時器標(biāo)識
var timer;
//點擊超鏈接切換到指定的圖片
//為所有的超鏈接綁定單擊響應(yīng)函數(shù)
for(var i=0;i<allA.length;i++){
//為每一個超鏈接都添加一個NUM屬性
allA[i].num=i;
//為超鏈接綁定單擊響應(yīng)函數(shù)
allA[i].onclick=function(){
//關(guān)閉自動切換
clearInterval(timer);
//獲取點擊超鏈接的索引，并將其設(shè)置為index
index=this.num;
//切換圖片
//imglist.style.left=index*-660+"px";
setA();
move(imglist,20,-660*index,"left",function(){
//動畫執(zhí)行完后，再執(zhí)行自動切換
autoChange();
});
};
}
//自動切換圖片
autoChange();
//創(chuàng)建一個方法來設(shè)置選中的A
function 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)建一個外部的div，來作為大的容器-->
<div id="outer">
<!--創(chuàng)建一個ul，用來放置圖片-->
<ul id="imglist">
<li>
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li>
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
<li>
<img src="images/5.jpg" />
</li>
<li>
<img src="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
//動畫函數(shù)
/*參數(shù)
* -1.obj 對象
* -2.speed 速度
* -3.target 執(zhí)行動畫的目標(biāo)
* -4.arrt 要變化的樣式
* -5.callback:回調(diào)函數(shù) 將會在動畫執(zhí)行完后執(zhí)行
*/
function move(obj,speed,target,arrt,callback){
//關(guān)閉上一次定時器
clearTimeout(obj.timer);
//判斷速度的正負(fù)值
//如果從0向800移動則為正
//如果從800向0移動則為負(fù)
var current=parseInt(getStyle(obj,arrt));
if(current>target){
speed=-speed;
}
//開啟一個定時器
//為obj添加一個timer屬性，用來保存它1自己的定時器的標(biāo)識
obj.timer=setInterval(function(){
//獲取原來的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)閉定時器
if(newvalue===target||newvalue===target){
clearTimeout(obj.timer);
//動畫執(zhí)行完 執(zhí)行函數(shù)
callback&&callback();
}
},30);
};
實現(xiàn)效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)圖片移動縮放效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了百度小程序自定義通用toast組件,百度小程序的toast僅支持在頁中展示，不能自定義位置、字體大小、在單個文本中增加icon等需求；因此自定義一個全局可通用的Toast,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了json數(shù)據(jù)格式常見操作,結(jié)合實例形式j(luò)son對象、json數(shù)組表示方式及遍歷技巧,需要的朋友可以參考下2019-06-06
淺談JavaScript中的對象及Promise對象的實現(xiàn)
這篇文章主要介紹了淺談JavaScript中的對象及Promise對象的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2015-11-11
bootstrap daterangepicker雙日歷時間段選擇控件詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap daterangepicker雙日歷時間段選擇控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
下面小編就為大家?guī)硪黄Ｓ迷鷍s自定義函數(shù)總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
淺析Javascript中bind()方法的使用與實現(xiàn)
下面小編就為大家?guī)硪黄獪\析Javascript中bind()方法的使用與實現(xiàn)。小編覺得挺不錯的，現(xiàn)在分享給大家，一起跟隨小編過來看看吧2016-04-04
小程序地理定位是指通過小程序開發(fā)平臺提供的?API,來獲取用戶的地理位置信息,用戶在使用小程序時,可以授權(quán)小程序獲取自己的地理位置信息,下面通過本文給大家分享微信小程序地理定位功能實現(xiàn),感興趣的朋友一起看看吧2024-05-05
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)時鐘動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JavaScript ECMA-262-3 深入解析（一）：執(zhí)行上下文實例分析
這篇文章主要介紹了JavaScript ECMA-262-3 執(zhí)行上下文,結(jié)合實例形式詳細(xì)分析JavaScript ECMA執(zhí)行上下文相關(guān)概念、原理與操作注意事項,需要的朋友可以參考下2020-04-04