js實(shí)現(xiàn)左右切換輪播圖思路

我們在 CSS 階段就已經(jīng)接觸到輪播圖。通過輪播圖我們可以達(dá)到一些好玩的特效，但使用 CSS 做出來的輪播圖只有左右切換，漸變切換和簡單的點(diǎn)擊切換。局限性較大，觀看效果也不佳。但當(dāng)我們接觸 js 之后，你就發(fā)現(xiàn)使用js來實(shí)現(xiàn)輪播圖后，在看CSS實(shí)現(xiàn)輪播的效果就是...。我想說啥你知道的。廢話不多說，咱們一起看看如何使用js來實(shí)現(xiàn)輪播效果。

創(chuàng)新互聯(lián)是一家專業(yè)提供二道江企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為二道江眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

（本文以陰陽師中“平安世界”模塊的輪播圖為例）

這個(gè)輪播圖，我們通過兩大模塊構(gòu)成；左右點(diǎn)擊模塊和姓名點(diǎn)擊模塊。然后在兩者相關(guān)聯(lián)來達(dá)到最終的效果。

在使用js實(shí)現(xiàn)輪播圖的效果前，先使用HTML和CSS完善這一模塊的布局。

本輪播圖使用8張圖片。每次出現(xiàn)兩張。我們在使用HTML和CSS布局時(shí)可以先把第一組的兩張圖片放好位置。其他的放在兩邊隱藏起來。需要使用的時(shí)候在出現(xiàn)移動(dòng)到中間。

左右點(diǎn)擊切換模塊：

我們通過對左右按鈕進(jìn)行點(diǎn)擊監(jiān)聽。在點(diǎn)擊后做出反應(yīng)。左右點(diǎn)擊的思路一樣。我們先說一下右邊按鈕點(diǎn)擊事件。

當(dāng)我們點(diǎn)擊右邊按鈕后，我們通過對點(diǎn)擊次數(shù)進(jìn)行累計(jì)。此處我使用初始化常量然后累加最后通過判斷來達(dá)到循環(huán)效果

對每一張圖片進(jìn)行編碼，以此來達(dá)到循環(huán)切換圖片的效果。在切換圖片時(shí)，我們可以使用排他思想。當(dāng)點(diǎn)擊按鈕切換下一張圖片的時(shí)候，我們可以先遍歷所有的圖片，把所有的圖片移動(dòng)到兩邊，然后將要移動(dòng)的圖片移動(dòng)到中央來達(dá)到切換效果

在移動(dòng)的過程中的動(dòng)畫和定時(shí)器設(shè)置的延遲可以自己添加一下。

左邊按鈕的原理和右邊一樣反操作即可。注意常量要使用一個(gè)。否則兩個(gè)按鈕都只能單方向運(yùn)動(dòng)，可能還會出現(xiàn)其他問題。

本次現(xiàn)講一下左右切換的思路。

js如何點(diǎn)擊左右按鈕切換圖片

這樣：

!DOCTYPE html

html

head

meta charset="UTF-8"

title動(dòng)態(tài)切換圖片/title

/head

style

ul{

padding:0;margin:0;

}

li{

list-style: none;

}

#pic{

position: relative;

width: 400px;

height: 400px;

background-color:red;

margin:100px auto;

background:url('image/1.jpg') no-repeat center;

}

#pic img{

width: 400px;

height: 400px;

}

#pic ul{

width: 50px;

position: absolute;

top: 0;

right: -70px;

}

li{

width: 40px;

height: 40px;

margin-bottom:10px;

background-color: pink;

float: left;

}

#pic span{

position: absolute;

bottom: 10px;

left: 0;

}

#pic p,#pic span{

width: 400px;

height: 20px;

}

#pic p{

position: absolute;

top: 10px;

left: 0;

}

.active{

background-color: red;

}

/style

body

div id="pic"

img src="" alt=""

pqwrwe/p

spanwerwer/span

ul

/ul

/div

script

window.onload=function(){

//存放舊li

var oldLi=null;

var num=0;

var oPic = document.getElementById('pic');

var oImg = oPic.getElementsByTagName('img')[0];

var oUL =? oPic.getElementsByTagName('ul')[0];

var oSpan= oPic.getElementsByTagName('span')[0];

var oP = oPic.getElementsByTagName('p')[0];

var oLi= oUL.getElementsByTagName('li');

var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];

var aText = ['圖片1','圖片2','圖片3','圖片4'];

for(var i=0;iarr.length;i++){

//動(dòng)態(tài)添加元素

oUL.innerHTML+='li/li';

}

// 舊li就等于當(dāng)前的

oldLi=oLi[num];

// 初始化

oImg.src=arr[num];

oP.innerHTML=num+1+'/'+arr.length;

oSpan.innerHTML=aText[num];

oLi[num].className='active';

for(var i=0;iarr.length;i++){

// 給元素自定義屬性

//

oLi[i].index=i;

oLi[i].onclick=function(){

// 當(dāng)元素被點(diǎn)擊時(shí)圖片文字信息都一起變化

oImg.src=arr[this.index];

oP.innerHTML=1+this.index+'/'+arr.length;

oSpan.innerHTML=aText[this.index];

// 清空上一個(gè) 當(dāng)前添加

oldLi.className='';

//將上一個(gè)給當(dāng)前

oldLi=this;

this.className='active';

}

}

}

/script

/body

/html

擴(kuò)展資料：

注意事項(xiàng)

1、可以通過JS刪除和添加hidden屬性，改用style.display="none"和style.display="inline"來實(shí)現(xiàn)隱藏和顯示。

2、button屬性，主要的問題時(shí)button樣式的問題，如何才能做一個(gè)好看的button，通過查找找到了設(shè)置button相關(guān)的值。

border:none; 設(shè)置按鈕無邊框

outline:none;消除按鈕點(diǎn)擊后出現(xiàn)的表示被點(diǎn)擊的邊框

background：url(...)按鈕背景圖片

text-shadow: 0 1px 1px rgba(0,0,0,.3);文字陰影

box-shadow: 0 5px 7px rgba(0,0,0,.2);按鈕陰影

border-radius:15px;按鈕邊框圓角

javascript圖片左右切換

使用javascript定時(shí)器函數(shù)setTimeout()每隔一定的毫秒間隔數(shù)執(zhí)行動(dòng)作，在執(zhí)行的動(dòng)作中循環(huán)替換圖片的src屬性。樹立演示如下：

1、HTML結(jié)構(gòu)

img?src="1.png"?id="test"

2、javascript代碼

function?change(n){ if(n5)?n=1;??//?一共5張圖片，所以循環(huán)替換 document.getElementById("test").setAttribute("src",?n+".png"); n++; setTimeout("change("+n+")",1000);}window.onload?=?function(){ setTimeout("change(1)",?1000);}

3、效果演示

網(wǎng)站欄目：javascript左右,js 左移
文章網(wǎng)址：http://chinadenli.net/article35/dsgjesi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、服務(wù)器托管、品牌網(wǎng)站建設(shè)、軟件開發(fā)、手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)