中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法

這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是少有的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、營(yíng)銷型企業(yè)網(wǎng)站、微信小程序定制開(kāi)發(fā)、手機(jī)APP,開(kāi)發(fā)、制作、設(shè)計(jì)、友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,成立與2013年,堅(jiān)持透明化,價(jià)格低,無(wú)套路經(jīng)營(yíng)理念。讓網(wǎng)頁(yè)驚喜每一位訪客多年來(lái)深受用戶好評(píng)

一、結(jié)構(gòu)層(HTML)

焦點(diǎn)圖的HTML結(jié)構(gòu)很簡(jiǎn)單,就是一個(gè)父容器(id=box),包含三個(gè)子容器,分別存放圖片(id=pics)、底部按鈕(id=dots)、作用切換箭頭(class=turn)。加上樣式后就是下圖二的布局。

基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法

基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法

二、表示層(CSS)

頁(yè)面的表現(xiàn)和風(fēng)格總是離不開(kāi)CSS。為敘述方便,后面采用id選擇符名或類選擇符名代表各div模塊。

1.box

box作為父容器,是整個(gè)焦點(diǎn)圖輪播結(jié)構(gòu)在網(wǎng)頁(yè)的直觀表現(xiàn),它的寬高就是要顯示的圖片的寬高。我將圖片設(shè)置為寬600px、高400px,使父容器box居中顯示,并加了陰影。樣式大概都可以隨自己愛(ài)好設(shè)置,但溢出一定要隱藏,定位一定要設(shè)置為相對(duì)定位,以使子容器的絕對(duì)定位準(zhǔn)確。

#box{
 width: 600px;
 height: 400px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: hidden;
 position: relative;
 box-shadow: 10px 10px 5px #888;
}

 2.pics

   pics用于放置圖片,因?yàn)槭侵谱髯笥仪袚Q功能,高仍是一張圖片的高,但寬=(展示的圖片數(shù)量+2)*圖片寬,原因在行為層再說(shuō)明。

另外需要注意的是,由展示圖片可知,pics在左右切換箭頭和底部切換按鈕的下層,所以z-index要設(shè)為1。

#pics{
 width: 5400px;
 height: 400px;
 position: absolute;
 z-index: 1;
}

3.dots

z-index設(shè)為2,置為上層顯示;定位為絕對(duì)定位;其他樣式隨喜好。這里我設(shè)置了鼠標(biāo)滑過(guò)的樣式,以及配合js對(duì)應(yīng)圖片位置改變的樣式(on)。

#dots{
 width: 120px;
 height: 10px;
 position: absolute;
 bottom: 25px;
 left: 40%;
 z-index: 2;
}
 
#dots span{
 width: 10px;
 height: 10px;
 float: left;
 margin-right: 5px;
 background: #333;
 border: solid 1px #FFF;
 border-radius: 50%;
 cursor: pointer;
}
 
#dots .on{background: orangered;}
#dots span:hover{background: orangered;}

4.turn

左右箭頭的重要樣式與dots一致,其他自定義。這里我設(shè)置了鼠標(biāo)滑過(guò)box,才顯現(xiàn)箭頭。

.turn{
 width: 40px;
 height: 40px;
 color: #fff;
 background: orangered;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 opacity: 0.5;
 position: absolute;
 top: 180px;
 display: none;
 z-index: 2;
 cursor: pointer;
}
.turn:hover{opacity: 0.8;}
#box:hover .turn{display: block;}

至此頁(yè)面的樣式和布局完成,但行為層方法和功能的實(shí)現(xiàn)才是重點(diǎn)。

三、行為層(JavaScript)

定義函數(shù)前,先在全局作用域中獲得頁(yè)面的節(jié)點(diǎn)。

var box = document.getElementById('box');
var pics = document.getElementById('pics');
var dots = document.getElementById('dots').getElementsByTagName('span');
var pre = document.getElementById('pre');
var next = document.getElementById('next');

1.圖片切換動(dòng)畫

輪播圖的核心方法,在于圖片的切換動(dòng)畫。而此函數(shù)的重點(diǎn),是接收一個(gè)位移量offset,然后改變pics相對(duì)于box的left值,從而對(duì)圖片進(jìn)行顯示。

之前CSS設(shè)置的,box的寬為600px,但pics的寬卻為5400px,由于box溢出隱藏,所以頁(yè)面只會(huì)顯示一張圖片;通過(guò)接收具體位移量offset,改變left值(減去或加上n個(gè)圖片寬度),就可以改變顯示的圖片。

此外還有兩個(gè)問(wèn)題,如果不設(shè)置圖片切換的速度,圖片就會(huì)整張整張的變換,沒(méi)有進(jìn)入切換的效果;而且如果不停的點(diǎn)擊切換,就會(huì)消耗太多的內(nèi)存造成電腦卡機(jī),出現(xiàn)頁(yè)面停在前一張圖未切換完就出現(xiàn)下一張等情況。所以要對(duì)圖片做一個(gè)速度處理,以及一張圖片為切換完就不允許其他切換的設(shè)置。

//圖片切換函數(shù)
 function turn(offset){ 
 turned = true; //切換允許標(biāo)志,在全局作用域中定義,true表示關(guān)閉允許切換
 var new_left = parseInt(pics.style.left) + offset; //最后left值
 var total_time = 300; //位移總時(shí)間
 var interval = 10; //每次位移間隔時(shí)間
 var speed = offset/(total_time/interval); //位移速度——每次位移量

 function go(){
 if((speed < 0 && parseInt(pics.style.left) > new_left) || (speed > 0 && parseInt(pics.style.left) < new_left)){ //右切||左切
 pics.style.left = parseInt(pics.style.left) + speed +'px';
 setTimeout(go,interval);
 }else{
 turned = false; //已切換完畢,開(kāi)啟允許切換
 pics.style.left = new_left +'px';
 if( new_left < -4200){
  pics.style.left = -600 +'px';
 }
 else if( new_left > -600){
  pics.style.left = -4200 +'px';
 }
 }
 }
 go();
 }

2.箭頭切換

在圖片切換函數(shù)turn()基礎(chǔ)上傳入?yún)?shù)。因?yàn)槭亲笥仪袚Q,所以每次直接傳入一個(gè)圖片寬度。向右切換傳入-600,左切傳入600。

這里要注意的就是,圖片與底部按鈕的同步,到兩邊的最后一張后參數(shù)的重置,以及是否允許切換的判斷。

//箭頭切換實(shí)現(xiàn)
 next.onclick = function(){
 if(index == 7){
 index = 1;
 }else{
 index += 1;
 }
 show_dots();
 if(!turned){
 turn(-600);
 }
 };
 pre.onclick = function(){
 if(index == 1){
 index = 7;
 }else{
 index -= 1;
 }
 show_dots();
 if(!turned){
 turn(600);
 }
 };

3.底部按鈕實(shí)現(xiàn)

按鈕與箭頭的不同,在于點(diǎn)擊它可以切換到任意一張圖片,所以在對(duì)切換函數(shù)turn()傳入?yún)?shù)前要先做一個(gè)計(jì)算。另外按鈕對(duì)應(yīng)樣式的變化也不能忘記。

//按鈕切換樣式
 function show_dots(){
 for(var i = 0; i < dots.length; i++){
 if(dots[i].className == 'on'){
 dots[i].className = '';
 break;
 }
 }
 dots[index - 1].className = 'on';
 }
 //按鈕切換實(shí)現(xiàn)
 for(var i = 0; i < dots.length; i++){
 dots[i].onclick= function(){
 if(this.className == 'on'){
 return;
 }
 var my_index = parseInt(this.getAttribute('index')); //注意! index是自定義屬性
 var offset = -600 * (my_index - index);         //計(jì)算切換位移量

 if(!turned){
 turn(offset);
 }
 index = my_index;
 show_dots();
 }
 }

4. 自動(dòng)播放

自動(dòng)播放自然就是設(shè)置定時(shí)器和清除定時(shí)器的問(wèn)題,這里不再贅述。

//定時(shí)動(dòng)畫
 function play(){
 time = setInterval(function(){
 next.onclick();
 },3000); 
 }
 //動(dòng)畫停止
 function stop(){clearInterval(time);}

 play();
 box.onmouseover = stop;
 box.onmouseout = play;

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

本文名稱:基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法
網(wǎng)頁(yè)路徑:http://m.rwnh.cn/article46/jgpjhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)公司網(wǎng)站排名、全網(wǎng)營(yíng)銷推廣、商城網(wǎng)站、App開(kāi)發(fā)網(wǎng)站建設(shè)

廣告

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

微信小程序開(kāi)發(fā)
读书| 肇庆市| 南康市| 鹤庆县| 台中市| 巫溪县| 祥云县| 清新县| 大埔区| 措美县| 石泉县| 偃师市| 承德市| 哈密市| 怀化市| 苍南县| 兴和县| 彰化市| 修武县| 晋城| 准格尔旗| 岢岚县| 玉山县| 青岛市| 都兰县| 湘阴县| 崇明县| 郯城县| 酒泉市| 积石山| 南丰县| 西藏| 金昌市| 九龙县| 镶黄旗| 兴和县| 台中县| 凭祥市| 沅陵县| 会同县| 邢台市|