重慶分公司
重慶分公司
JavaScript如何實現(xiàn)動態(tài)的輪播圖效果-創(chuàng)新互聯(lián)
這篇文章將為大家詳細(xì)講解有關(guān)JavaScript如何實現(xiàn)動態(tài)的輪播圖效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司服務(wù)項目包括蔚縣網(wǎng)站建設(shè)、
蔚縣網(wǎng)站制作、蔚縣網(wǎng)頁制作以及蔚縣網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，
蔚縣網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到蔚縣省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
利用javascript能實現(xiàn)常見的動態(tài)的網(wǎng)頁輪播圖效果，如下圖1所示：
圖1
實現(xiàn)該輪播圖有以下幾個要點：
(1)在左右兩側(cè)各有一個箭頭，分別指的是向左和向右切換，即點擊相應(yīng)的位置就會切換到該圖片之前(或之后)的一張圖片
(2)在圖片的下方有一排圓形按鈕，每個按鈕有各自的單擊事件，點擊任意一個按鈕就切換到對應(yīng)的圖片
(3)不點擊圖片時，圖片會自動播放，即有一個圖片輪播效果
首先可以寫出大概的HTML代碼為代碼1：
代碼1：
//設(shè)置圖像的父級元素定位為向左600px，即是左移一個圖片的寬度
//設(shè)置的是5張圖片自動輪播，此處會有7張圖片，并且紅色代碼表示的圖片和 藍(lán)色代碼表示的圖片是相同的。這是因為每張圖片都有向前和向后兩種單擊
事件，要使第一張圖片向前單擊顯示第五張圖片，就需要在其前方添加第五
張圖片，避免在第一張圖片單擊向左時顯示空白；同理，在第五張圖片之
后也要添加第一張圖片，使其實現(xiàn)平穩(wěn)過渡
//設(shè)置相對應(yīng)的按鈕，并未按鈕添加對應(yīng)的自定義屬性 index
< //此處的a表示的是箭頭；<(左箭頭)，>(右箭頭)
>
在上例中，圖片的寬是600px，高是400px；
然后再設(shè)置其CSS樣式為代碼2：
代碼2：
*{margin: 0;padding: 0;text-decoration: none;} //設(shè)置所有元素的基本樣式
body{padding: 20px;}
#container{
position: relative; //設(shè)置最外層的div元素的定位為相對定位，即是相對與未設(shè)置定位之前的位置進(jìn)行定位
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden; //設(shè)置容器的寬高，并將溢出部分設(shè)置為隱藏
}
#list{
position: absolute; //設(shè)置圖片所在的父級div的定位為絕對定位，即是相對于已定位的父級元素進(jìn)行定位
z-index: 1; //設(shè)置該div的顯示層次
width: 4200px; //該div是所有圖片的父級元素，因此其寬高的設(shè)置應(yīng)該包含所有的圖片
height: 400px;
}
#list img{
float: left; //設(shè)置圖片的顯示的顯示方式，為向左浮動
width: 600px;
height: 400px;
}
#buttons{
position: absolute; //設(shè)置屏幕下方的所有圓點的定位方式，相對于容器元素進(jìn)行絕對定位
left: 250px; //距離父級已進(jìn)行定位的元素的左側(cè)距離為250px
bottom: 20px;
z-index: 2; //設(shè)置圓點的顯示層級為2，即是在圖片div的上方
height: 10px;
width: 100px;
}
#buttons span{
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%; //半徑為50%，即是設(shè)置為圓點顯示
background: #333;
cursor: pointer;
}
#buttons .on{
background: orangered;
}
.arrow{
position: absolute; //設(shè)置按鈕的定位方式，即是相對與容器元素進(jìn)行絕對定位
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);
}
#container:hover .arrow{
display: block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}*/設(shè)置完基本的樣式之后，其顯示效果如圖2所示：
圖2
此時需要給特定的元素添加事件，如下列的代碼3所示：
代碼3：
window.onload=function(){
var list=document.getElementById('list'); //獲取圖片元素的父級元素，并命名為list
var prev=document.getElementById('prev'); //獲取左箭頭
var next=document.getElementById('next'); //獲取右箭頭
function animate(offset){ //設(shè)置一個名為animate的函數(shù)，該函數(shù)接收一個參數(shù)
var newleft=parseInt(list.style.left)+offset; //獲取圖片的父級元素的左側(cè)的定位值，并加上傳入的參數(shù)offset
if(newleft<-3000){ //圖片的父級div在移動的過程中，顯示的圖片的定位都是負(fù)值，如圖3所示
list.style.left= -600+'px'; //但圖片顯示到五張圖片上的最后一張時，自動跳轉(zhuǎn)到第一張圖片
}else if(newleft>-600){ //當(dāng)在第一張圖片上單擊向左的按鈕時，自動跳轉(zhuǎn)到最后一張
list.style.left= -3000+'px';
}else{
list.style.left=newleft+'px';
}
} 函數(shù)animate()中獲取的是style.left，是相對左邊獲取距離，所以第一張圖后style.left都為負(fù)值，如圖3所示：
圖3
結(jié)合上述的代碼3，我們可設(shè)置向左和向右的按鈕的單擊事件，如代碼4所示：
代碼4:
prev.onclick=function(){ //向左的單擊事件
animate(600);
}
next.onclick=function(){ //向右的單擊事件
animate(-600)
}
var timer;
function play(){
timer=setInterval(function(){ //設(shè)置間歇調(diào)用，時間間隔為1500毫秒
next.onclick() //此處是自動向右切換，如果想設(shè)置為向左切換，把next換為prev即可
},1500)
}
play(); //實現(xiàn)自動調(diào)用
var container=document.getElementById('container'); //獲取最外層的容器元素
function stop(){
clearInterval(timer);
}
container.onmouseover=stop; //當(dāng)鼠標(biāo)移動到上方時，清除定時器
container.onmouseout=play; //當(dāng)鼠標(biāo)從容器元素上方移走時，進(jìn)行自動輪播
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var index=1;
function buttonsShow(){
for(var i=0;i5){
index=1;
}
buttonsShow();
animate(-600);
}
//點擊任意一個小圓點就切換到所對應(yīng)的圖片
for(var i=0;i關(guān)于“JavaScript如何實現(xiàn)動態(tài)的輪播圖效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
分享文章：JavaScript如何實現(xiàn)動態(tài)的輪播圖效果-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/ceiijd.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
