溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

【jquery前端開發(fā)】可調(diào)整的幻燈片(圖片輪播)

發(fā)布時(shí)間：2020-07-15 14:53:20 來源：網(wǎng)絡(luò) 閱讀：1006 作者：okmnji54 欄目：web開發(fā)

第一次寫博客，希望接下來寫的東西 或多或少能幫到些人，雖然這些東西都是一些大神前輩們寫了無數(shù)遍的東西，但我盡量以一名小白的視角把代碼寫得清楚點(diǎn)，好心人的就給點(diǎn)贊吧。


DEMO演示效果


1.前期準(zhǔn)備
這是我們編寫代碼前必須要做的事，在這里我們首先要明確下作品要具備的功能。
1.支持幻燈片的大小控制
這里我們用SLIDER_BOX_WIDTH,SLIDER_BOX_HEIGHT分別表示幻燈片的寬和高
2.支持幻燈片放置位置的控制，即可以將幻燈片放在任何DIV下
這里我們用SLIDER_BOX_CLASS 表示裝入幻燈片的DIV的類名
3.支持幻燈片切換方式的變換
這里我們用SLIDER_TYPE 表示幻燈片的切換方式，這里主要是兩種(slider滑動(dòng)和fade淡入淡出)
4.支持圖片張數(shù)的添加
這里我們用NUM_OF_IMG 表示
5.能夠根據(jù)需要調(diào)整是否自動(dòng)播放，動(dòng)畫的運(yùn)行時(shí)間，動(dòng)畫的間隔時(shí)間，以及是否懸停，顯示內(nèi)容等等，這些就等到我們做的時(shí)候再做說明。


其中調(diào)用的是一個(gè)style.css文件和一個(gè)slider.js文件


2.HTML準(zhǔn)備

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slider</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
    <div class="slider_box"></div>
</body>
</html>

   其實(shí)就是加一個(gè)class名為slider_box的div罷了。。

3.CSS準(zhǔn)備 

/*************reset***************/
html{color:#333;-webkit-text-size-adjust:none; }
body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
h2,h3,h4,h5,h6,h7{font-size:100%;}q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
body{font-size:12px;}
a{color: #333333;text-decoration: none;}
a:hover{text-decoration:underline; color:c00;}

   上面這些是消除瀏覽器默認(rèn)樣式的代碼----恩，我復(fù)制的。

/************style**************/
/*寫滑動(dòng)的時(shí)候定位得加上，fade方式的話可以不考慮*/
.slider_box{ /*最外層用來放置幻燈片的DIV*/
    position: relative;
    margin:0px auto;
    overflow: hidden;
}
/*輪播器里的圖片，因?yàn)槲医o每個(gè)圖片加了個(gè)鏈接，所以是>a>img */
.slider_box>a>img{
    position: absolute;
}
/*********左跳轉(zhuǎn)觸發(fā)器***********/
div.slider_box_left_turnTo{
    background: url('../img/cho.png') no-repeat top left;
    position: absolute;
    left: 5%;
}
/*********右跳轉(zhuǎn)觸發(fā)器***********/
div.slider_box_right_turnTo{
    background: url('../img/cho.png') no-repeat top right;
    position: absolute;
    right: 5%;
}
div.slider_box_left_turnTo:hover{
    background-position: bottom left;
    cursor: pointer;
}
div.slider_box_right_turnTo:hover{
    background-position: bottom right;
    cursor: pointer;
}
/*用來放置相關(guān)控制元素的盒子*/
div.slider_box_pointBox_turnTo{
    width: 100%;
    position: absolute;
    background: rgba(0,0,0,0.4);
}
ul.slider_box_pointBox_turnTo{
    position: absolute;
    margin-left: -60px;
    top:40%;
    left: 45%;
}
/*圖片對應(yīng)的跳轉(zhuǎn)點(diǎn)的樣式*/
li.slider_box_point_turnTo{
    background: url('../img/bnt.png') no-repeat top;
}
li.slider_box_point_turnTo:hover{
    cursor: pointer;
}
/*用來放置圖片介紹內(nèi)容的盒子*/
div.slider_box_content{
    position: absolute;
    background: rgba(0,0,0,0.6);
    width: 100%;
    font-size: 15%;
    color: #fff;
    overflow: hidden;
}



4.jquery準(zhǔn)備

首先給初學(xué)者介紹下圖片輪播實(shí)現(xiàn)的基本原理，即：通過每隔一段時(shí)間(setInterval)觸發(fā)(trigger)一次點(diǎn)擊(鼠標(biāo)懸浮)事件來完成一個(gè)功能。這個(gè)功能是：當(dāng)鼠標(biāo)點(diǎn)擊（懸?。┑臅r(shí)候，某張圖片完成一次animate動(dòng)作。這個(gè)東西其實(shí)就是 給 點(diǎn)擊滑動(dòng) 加了個(gè)循環(huán)觸發(fā)。


正餐來了

   因?yàn)閷戇@東我是要強(qiáng)調(diào)可拓展，可重用，所以基本都要把jquery代碼分門別類放到函數(shù)中，通過函數(shù)間的調(diào)用來完成功能。（←_ ←|| 我又在裝了!!）


相關(guān)參數(shù)

/****************DATA_SET*******************/
var SLIDER_BOX_CLASS        = ".slider_box",  //要放置幻燈片的class名
    SLIDER_BOX_WIDTH        = 1024,           //幻燈片圖片的寬度(px)
    SLIDER_BOX_HEIGHT       = 640,            //幻燈片圖片的高度(px)
    SLIDER_TYPE             = "slider",       //幻燈片動(dòng)畫的方式(slider,fade)
    POINT_L_R_MARGIN        = 20,             //跳轉(zhuǎn)點(diǎn)的左右外距(px)
    NUM_OF_IMG              = 3,              //圖片的張數(shù)
    IMG_SRC                 = ["img/1.jpg","img/2.jpg","img/3.jpg"], //圖片的地址,數(shù)組形式
    IMG_LINK                = ["#","#","#"],  //每張圖片對應(yīng)的鏈接,輕按圖片對應(yīng)的順序?qū)懭?    AUTO_PLAY               = true,           //自動(dòng)播放(true,false)
    SPEED                   = 300,            //動(dòng)畫運(yùn)行的時(shí)間（ms）
    TIME_DELAY              = 4000,           //自動(dòng)跳轉(zhuǎn)時(shí)的時(shí)間間隔(ms)
    HOVER_STOP              = false,          //是否啟用懸停效果(true,false)
    CONTENT_SHOW            = false,          //是否顯示內(nèi)容盒子(true,false)
    CONTENT_FONT_COLOR      = "#FFF";         //盒子內(nèi)容的字體顏色


⑴元素動(dòng)態(tài)添加的功能集合

//added about
//圖片添加函數(shù)
//傳遞進(jìn)來的參數(shù)從左往右代表的分別是:要放入圖片的DIV類名，圖片的數(shù)目
//，圖片的地址（數(shù)組），對應(yīng)圖片的鏈接（數(shù)組，與圖片順序?qū)?yīng)）
//，圖片的寬度，圖片的高度（這些其實(shí)和盒子大小是一樣的）
//實(shí)現(xiàn)的過程是：通過循環(huán)把不同的圖片和鏈接打包放入到DIV盒子中，因?yàn)?//我們在設(shè)置CSS的時(shí)候已經(jīng)設(shè)了定位，所以不用擔(dān)心樣式的問題
//此段JS生成的html代碼相當(dāng)于:
//<a href="img_link[i]">
//<img class="img_i" src="addr" width="S_width" height="S_height"></a>
//以后的代碼的功能都類似（←_ ←上面是寫給初學(xué)者的，大神可略過）
function Add_Img(slider_box_class,num,src,img_link,S_width,S_height){
    var i,addr;
    for(i=num-1;i>=0;i--)
    {
        addr = src[i];
        $('<a/>',{
            href : img_link[i],
            html : $('<img/>',{
                    src   : addr,
                    class : 'img_'+i,
                    width : S_width,
                    height: S_height
            })
        }).appendTo(slider_box_class);
    }
}
//跳轉(zhuǎn)點(diǎn)添加函數(shù)
//從左往右的參數(shù)是：點(diǎn)的數(shù)目（與IMG的張數(shù)一致且分別對應(yīng)）
//，跳轉(zhuǎn)點(diǎn)的左右外邊距，以及存放跳轉(zhuǎn)點(diǎn)盒子的高度值
//大家在這一段代碼可能發(fā)現(xiàn)一些參數(shù)是有計(jì)算的，這是
//為了使內(nèi)部的元素能夠隨幻燈片播放器的大小自動(dòng)調(diào)整
//計(jì)算方法的話可以進(jìn)行改變，我這里只是提供個(gè)參考，
//不過提醒一點(diǎn)的是大家改之前最好先看看控制元素對應(yīng)圖片的分辨率
//以免造成樣式錯(cuò)位等問題
function Add_Point(num,point_l_r_margin,pointBox_height){
    var i;
    for(i=0;i<=num-1;i++)
    {
        $('<li/>',{
            class : 'slider_box_point_turnTo list_'+i,
            style : 'margin-    left:'+point_l_r_margin+'px;margin-right:'+point_l_r_margin+'px;float:left;height:'+(pointBox_height*16/42)+'px;width:'+(pointBox_height*17/42)+'px;background-size:'+(pointBox_height*17/42)+'px '+(pointBox_height*32/42)+'px;'
        }).appendTo('ul.slider_box_pointBox_turnTo');
    }
}
//跳轉(zhuǎn)盒子添加函數(shù)
//參數(shù)從左往右是：最外層盒子class名，跳轉(zhuǎn)盒子的寬，跳轉(zhuǎn)盒子的高
//這里的代碼看起來可能會(huì)有點(diǎn)亂，但沒辦法，我試過寫簡單點(diǎn)，但老是
//報(bào)錯(cuò)，所以就只能這樣寫了，如果大家有簡單的寫法歡迎來分享，留言就
//行了。因?yàn)樘D(zhuǎn)盒子里面要存放 左跳轉(zhuǎn)的按鈕，右跳轉(zhuǎn)的按鈕和跳轉(zhuǎn)點(diǎn)
//所以html:"" 這里是按 左跳轉(zhuǎn)，跳轉(zhuǎn)點(diǎn)，右跳轉(zhuǎn)的順序添加的，不懂的話
//看下我代碼的演示效果就行了
function Add_pointBox(slider_box_class,pointBox_width,pointBox_height){
    $('<div/>',{
        class : 'slider_box_pointBox_turnTo',
        style : 'width:'+pointBox_width+'px;height:'+pointBox_height+'px;bottom:0px;',
        html  : '<div class="slider_box_left_turnTo" ></div><ul class="slider_box_pointBox_turnTo"></ul><div class="slider_box_right_turnTo" ></div>'
    }).appendTo(slider_box_class);
}
//內(nèi)容盒子的設(shè)置
//參數(shù)的話大家應(yīng)該能看懂了，都差不多
//其實(shí)這里我的本意是想寫成接受后臺(tái)數(shù)據(jù)的，但因?yàn)樽罱鐖F(tuán)的活動(dòng)
//就擱置了下來，大家如果有興趣也看得起我這些代碼的話，可以自行拓展
function ContentBox_Set(slider_box_class,content_show,color,S_width,S_height,pointBox_height){
    if(content_show){
        $('<div/>',{
            class : 'slider_box_content',
            style : 'color:'+color+';width:'+S_width+'px;height:'+(S_height*0.1+10)+'px;overflow:hidden;bottom:'+pointBox_height+'px;',
            html  : 'hello'
        }).appendTo(slider_box_class);
    }
}


⑵生成相關(guān)html的函數(shù)


//adjust about
//這里的話純粹就是將前面那些生成html代碼的元素給整合實(shí)現(xiàn)了
//我還加了個(gè)判斷，當(dāng)播放器的寬高小于某個(gè)值的時(shí)候會(huì)進(jìn)行重置，
//因?yàn)楫?dāng)播放器很小的時(shí)候真的太難看了，所以強(qiáng)迫癥的我弄了點(diǎn)處理措施
function Data_Adjust(slider_box_class,S_width,S_height,num,src,img_link,point_l_r_margin,content_show,color){
    var pointBox_height = 24 + S_height/40;
    if(S_width<=300 || S_height<=200)
    {
        S_width = 1024;
        S_height = 640;
    }
    //slider box adjust
    $(slider_box_class).css({'width':S_width,'height':S_height});
    //content box adjust
    Add_Img(slider_box_class,num,src,img_link,S_width,S_height);
    Add_pointBox(slider_box_class,S_width,pointBox_height);
    Add_Point(num,point_l_r_margin,pointBox_height);
    ContentBox_Set(slider_box_class,content_show,color,S_width,S_height,pointBox_height);
}


⑶這里是跟顯示相關(guān)的函數(shù)

//show about
//這里基本上都是循環(huán)實(shí)現(xiàn)的過程
//跳轉(zhuǎn)點(diǎn)樣式變化
//當(dāng)跳轉(zhuǎn)到某張圖片時(shí)，對應(yīng)的跳轉(zhuǎn)點(diǎn)設(shè)置為高亮
function Point_change(i){
    $('.slider_box_point_turnTo').css({'background-position':'top'});
    $('.slider_box_point_turnTo').attr('id',"");
    $('.list_'+i).css({'background-position':'bottom'});
    $('.list_'+i).attr('id','change_point');
}
//左滑動(dòng)的效果實(shí)現(xiàn)
function Slider_left(slider_box_class,num,width,speed,i)
{
    $(slider_box_class).find('img').not('.img_'+i).css({'left':width+'px'});
    $(slider_box_class).find('img.img_'+i).animate({left:'-'+width+'px'},speed);
    i==num-1?i=0:i++;
    $(slider_box_class).find('img.img_'+i).animate({left:'0px'},speed);
}
//右滑動(dòng)的效果實(shí)現(xiàn)
function Slider_right(slider_box_class,num,width,speed,i){
    $(slider_box_class).find('img').not('.img_'+i).css({'left':'-'+width+'px'});
    $(slider_box_class).find('img.img_'+i).animate({left:width+'px'},speed);
    i==0?i=num-1:i--;
    $(slider_box_class).find('img.img_'+i).animate({left:'0px'},speed);
}
//相關(guān)跳轉(zhuǎn)點(diǎn)被點(diǎn)擊時(shí)的事件處理函數(shù)，我這里用來live，但現(xiàn)在的jquery都
//不用live，改成on和off了，請大家自己注意，因?yàn)槲覍戇@個(gè)代碼的時(shí)候還不
//知道，寫完才知道的。后面也不想改了。請大家諒解
//這里的處理過程是：通過獲取高亮的跳轉(zhuǎn)點(diǎn)的class值來判斷是哪張
//圖片要進(jìn)行跳轉(zhuǎn)
function Type_slider(slider_box_class,num,width,speed){
    var i = 0;
    $('.list_'+i).css({'background-position':'bottom'});
    $('.list_'+i).attr('id','change_point');
    var long_class;
    $(slider_box_class).find('div.slider_box_right_turnTo').live('click',function(){
        long_class =  $(slider_box_class).find('li#change_point').attr('class');
        i = long_class.substring((long_class.length)-1);
        if(!$(slider_box_class).find('img').is(':animated'))
        {
            Slider_left(slider_box_class,num,width,speed,i);
            i==num-1?i=0:i++;
            Point_change(i);
        }
    })
    $(slider_box_class).find('div.slider_box_left_turnTo').live('click',function(){
        long_class =  $(slider_box_class).find('li#change_point').attr('class');
        i = long_class.substring((long_class.length)-1);
        if(!$(slider_box_class).find('img').is(':animated'))
        {
            Slider_right(slider_box_class,num,width,speed,i);
            i==0?i=num-1:i--;
            Point_change(i);
        }
    })
    Point_click_slider(slider_box_class,width,speed);
}
//淡入淡出效果的實(shí)現(xiàn)函數(shù)
function Type_fade(slider_box_class,num,speed)
{
    var i=0;
    $(slider_box_class).find('img').not('.img_'+i).hide();
    $('.list_'+i).css({'background-position':'bottom'});
    $('.list_'+i).attr('id','change_point');
    $(slider_box_class).find('div.slider_box_right_turnTo').click(function(){
        if(!$(slider_box_class).find('img').is(':animated'))
        {
            $(slider_box_class).find('img.img_'+i).fadeOut(speed,function(){
                i==num-1?i=0:i++;
                $(slider_box_class).find('img.img_'+i).fadeIn(speed);
                Point_change(i);
            });
        }
    })
    $(slider_box_class).find('div.slider_box_left_turnTo').click(function(){
        if(!$(slider_box_class).find('img').is(':animated'))
        {
            $(slider_box_class).find('img.img_'+i).fadeOut(speed,function(){
                i==0?i=num-1:i--;
                $(slider_box_class).find('img.img_'+i).fadeIn(speed);
                Point_change(i);
            });
        }
    })
    Point_click_fade(slider_box_class,num,speed);
}



⑷控制相關(guān)的函數(shù)


//control about
//跳轉(zhuǎn)點(diǎn)被點(diǎn)擊時(shí)觸發(fā)的效果，兩個(gè)函數(shù)：一個(gè)是滑動(dòng)的觸發(fā)，一個(gè)是fade的
//觸發(fā)，這里的圖片滑動(dòng)方向的判斷機(jī)制是：通過判斷 被點(diǎn)擊的點(diǎn) 與 當(dāng)前點(diǎn)
//的位置來判斷進(jìn)行左移或者右移，fade函數(shù)無判斷機(jī)制
function Point_click_slider(slider_box_class,width,speed){
    var i,long_class;
    $('.slider_box_point_turnTo').live('click',function(){
        var this_li = event.target;
        var P_class = $(this_li).attr('class');
        var $length = P_class.length;
        var j = P_class.substring($length-1);
        long_class =  $(slider_box_class).find('li#change_point').attr('class');
        i = long_class.substring((long_class.length)-1);
        if(j>i)
        {
            if(!$(slider_box_class).find('img').is(':animated'))
            {
                $(slider_box_class).find('img').not('.img_'+i).css({'left':width+'px'});
                $(slider_box_class).find('img.img_'+i).animate({left:'-'+width+'px'},speed);
                $(slider_box_class).find('img.img_'+j).animate({left:'0px'},speed);
                Point_change(j);
            }
        }else if(j<i)
        {
            if(!$(slider_box_class).find('img').is(':animated'))
            {
                $(slider_box_class).find('img').not('.img_'+i).css({'left':'-'+width+'px'});
                $(slider_box_class).find('img.img_'+i).animate({left:width+'px'},speed);
                $(slider_box_class).find('img.img_'+j).animate({left:'0px'},speed);
                Point_change(j);
            }
        }
    })
}
function Point_click_fade(slider_box_class,num,speed){
    var i,long_class;
    $('.slider_box_point_turnTo').live('click',function(){
        var this_li = event.target;
        var P_class = $(this_li).attr('class');
        var $length = P_class.length;
        var j = P_class.substring($length-1);
        long_class =  $(slider_box_class).find('li#change_point').attr('class');
        i = long_class.substring((long_class.length)-1);
        if(!$(slider_box_class).find('img').is(':animated'))
        {
            $(slider_box_class).find('img.img_'+i).fadeOut(speed,function(){
                $(slider_box_class).find('img.img_'+j).fadeIn(speed);
                Point_change(j);
            });
        }
    })
}
//判斷是否有懸停，是否自動(dòng)播放，以及跳轉(zhuǎn)的方式等等
function Slider_Control(slider_box_class,num,type,width,auto,speed,circle_time,hover_stop){
    var Time_circle;
    if(type=="slider")
    Type_slider(slider_box_class,num,width,speed);
    if(type=="fade")
    Type_fade(slider_box_class,num,speed);
    if(auto)
    Time_circle = setInterval("Tri()",circle_time);
    if(hover_stop){
        $('.slider_box_pointBox_turnTo').hover(function(){
            clearInterval(Time_circle);
        },function(){
            Time_circle = setInterval("Tri()",circle_time);
        })
    }
}



⑸最后是調(diào)用了


Data_Adjust(SLIDER_BOX_CLASS,SLIDER_BOX_WIDTH,SLIDER_BOX_HEIGHT,NUM_OF_IMG,IMG_SRC,IMG_LINK,POINT_L_R_MARGIN,CONTENT_SHOW,CONTENT_FONT_COLOR);
Slider_Control(SLIDER_BOX_CLASS,NUM_OF_IMG,SLIDER_TYPE,SLIDER_BOX_WIDTH,AUTO_PLAY,SPEED,TIME_DELAY,HOVER_STOP);
//這個(gè)是觸發(fā)函數(shù)
function Tri(){
    $('.slider_box_right_turnTo').trigger('click');
}


到這里我們的編寫就基本完成了，實(shí)際上上述代碼還是可繼續(xù)拓展的，比如說通過判斷調(diào)整內(nèi)容區(qū)域顯示的位置，或者添加新的跳轉(zhuǎn)方式，或者將跳轉(zhuǎn)點(diǎn)設(shè)置為相應(yīng)的小圖片等等。。雖然我不知道我到底寫得算不算及格，但本人寫可拓展性的代碼的目的達(dá)到了，這里也和大家分享一下，歡迎大家多多交流。求大神輕噴！

附件：http://down.51cto.com/data/2364266
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手