【jquery前端開發】可調整的幻燈片(圖片輪播)薦

okmnji54發表於2014-04-06

jQuery前端

第一次寫部落格，希望接下來寫的東西或多或少能幫到些人，雖然這些東西都是一些大神前輩們寫了無數遍的東西，但我儘量以一名小白的視角把程式碼寫得清楚點，好心人的就給點贊吧。

DEMO演示效果

1.前期準備

這是我們編寫程式碼前必須要做的事，在這裡我們首先要明確下作品要具備的功能。

1.支援幻燈片的大小控制

這裡我們用SLIDER_BOX_WIDTH,SLIDER_BOX_HEIGHT分別表示幻燈片的寬和高

2.支援幻燈片放置位置的控制，即可以將幻燈片放在任何DIV下

這裡我們用SLIDER_BOX_CLASS 表示裝入幻燈片的DIV的類名

3.支援幻燈片切換方式的變換

這裡我們用SLIDER_TYPE 表示幻燈片的切換方式，這裡主要是兩種(slider滑動和fade淡入淡出)

4.支援圖片張數的新增

這裡我們用NUM_OF_IMG 表示

5.能夠根據需要調整是否自動播放，動畫的執行時間，動畫的間隔時間，以及是否懸停，顯示內容等等，這些就等到我們做的時候再做說明。

其中呼叫的是一個style.css檔案和一個slider.js檔案

2.HTML準備

<!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>

其實就是加一個class名為slider_box的div罷了。。

3.CSS準備

/*************reset***************/
html{color:#333;-webkit-text-size-adjust:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,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;}
h1,h2,h3,h4,h5,h6{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;}

上面這些是消除瀏覽器預設樣式的程式碼—-恩，我複製的。

/************style**************/
/*寫滑動的時候定位得加上，fade方式的話可以不考慮*/
.slider_box{ /*最外層用來放置幻燈片的DIV*/
    position: relative;
    margin:0px auto;
    overflow: hidden;
}
/*輪播器裡的圖片，因為我給每個圖片加了個連結，所以是>a>img */
.slider_box>a>img{
    position: absolute;
}
/*********左跳轉觸發器***********/
div.slider_box_left_turnTo{
    background: url(`../img/cho.png`) no-repeat top left;
    position: absolute;
    left: 5%;
}
/*********右跳轉觸發器***********/
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;
}
/*用來放置相關控制元素的盒子*/
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%;
}
/*圖片對應的跳轉點的樣式*/
li.slider_box_point_turnTo{
    background: url(`../img/bnt.png`) no-repeat top;
}
li.slider_box_point_turnTo:hover{
    cursor: pointer;
}
/*用來放置圖片介紹內容的盒子*/
div.slider_box_content{
    position: absolute;
    background: rgba(0,0,0,0.6);
    width: 100%;
    font-size: 15%;
    color: #fff;
    overflow: hidden;
}

4.jquery準備

首先給初學者介紹下圖片輪播實現的基本原理，即：通過每隔一段時間(setInterval)觸發(trigger)一次點選(滑鼠懸浮)事件來完成一個功能。這個功能是：當滑鼠點選（懸浮）的時候，某張圖片完成一次animate動作。這個東西其實就是給點選滑動加了個迴圈觸發。

正餐來了

因為寫這東我是要強調可擴充，可重用，所以基本都要把jquery程式碼分門別類放到函式中，通過函式間的呼叫來完成功能。（←_ ←|| 我又在裝了!!）

相關引數

/****************DATA_SET*******************/
var SLIDER_BOX_CLASS        = ".slider_box",  //要放置幻燈片的class名
    SLIDER_BOX_WIDTH        = 1024,           //幻燈片圖片的寬度(px)
    SLIDER_BOX_HEIGHT       = 640,            //幻燈片圖片的高度(px)
    SLIDER_TYPE             = "slider",       //幻燈片動畫的方式(slider,fade)
    POINT_L_R_MARGIN        = 20,             //跳轉點的左右外距(px)
    NUM_OF_IMG              = 3,              //圖片的張數
    IMG_SRC                 = ["img/1.jpg","img/2.jpg","img/3.jpg"], //圖片的地址,陣列形式
    IMG_LINK                = ["#","#","#"],  //每張圖片對應的連結,輕按圖片對應的順序寫入
    AUTO_PLAY               = true,           //自動播放(true,false)
    SPEED                   = 300,            //動畫執行的時間（ms）
    TIME_DELAY              = 4000,           //自動跳轉時的時間間隔(ms)
    HOVER_STOP              = false,          //是否啟用懸停效果(true,false)
    CONTENT_SHOW            = false,          //是否顯示內容盒子(true,false)
    CONTENT_FONT_COLOR      = "#FFF";         //盒子內容的字型顏色

⑴元素動態新增的功能集合

//added about
//圖片新增函式
//傳遞進來的引數從左往右代表的分別是:要放入圖片的DIV類名，圖片的數目
//，圖片的地址（陣列），對應圖片的連結（陣列，與圖片順序對應）
//，圖片的寬度，圖片的高度（這些其實和盒子大小是一樣的）
//實現的過程是：通過迴圈把不同的圖片和連結打包放入到DIV盒子中，因為
//我們在設定CSS的時候已經設了定位，所以不用擔心樣式的問題
//此段JS生成的html程式碼相當於:
//<a href="img_link[i]">
//<img class="img_i" src="addr" width="S_width" height="S_height"></a>
//以後的程式碼的功能都類似（←_ ←上面是寫給初學者的，大神可略過）
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);
    }
}
//跳轉點新增函式
//從左往右的引數是：點的數目（與IMG的張數一致且分別對應）
//，跳轉點的左右外邊距，以及存放跳轉點盒子的高度值
//大家在這一段程式碼可能發現一些引數是有計算的，這是
//為了使內部的元素能夠隨幻燈片播放器的大小自動調整
//計算方法的話可以進行改變，我這裡只是提供個參考，
//不過提醒一點的是大家改之前最好先看看控制元素對應圖片的解析度
//以免造成樣式錯位等問題
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`);
    }
}
//跳轉盒子新增函式
//引數從左往右是：最外層盒子class名，跳轉盒子的寬，跳轉盒子的高
//這裡的程式碼看起來可能會有點亂，但沒辦法，我試過寫簡單點，但老是
//報錯，所以就只能這樣寫了，如果大家有簡單的寫法歡迎來分享，留言就
//行了。因為跳轉盒子裡面要存放 左跳轉的按鈕，右跳轉的按鈕和跳轉點
//所以html:"" 這裡是按 左跳轉，跳轉點，右跳轉的順序新增的，不懂的話
//看下我程式碼的演示效果就行了
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" style="height:`+(pointBox_height/42*40)+`px;width:`+(pointBox_height/42*30)+`px;background-size:`+(pointBox_height/42*60)+`px `+(pointBox_height/42*80)+`px;"></div><ul class="slider_box_pointBox_turnTo"></ul><div class="slider_box_right_turnTo" style="height:`+(pointBox_height/42*40)+`px;width:`+(pointBox_height/42*30)+`px;background-size:`+(pointBox_height/42*60)+`px `+(pointBox_height/42*80)+`px;"></div>`
    }).appendTo(slider_box_class);
}
//內容盒子的設定
//引數的話大家應該能看懂了，都差不多
//其實這裡我的本意是想寫成接受後臺資料的，但因為最近社團的活動
//就擱置了下來，大家如果有興趣也看得起我這些程式碼的話，可以自行擴充
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);
    }
}

⑵生成相關html的函式

//adjust about
//這裡的話純粹就是將前面那些生成html程式碼的元素給整合實現了
//我還加了個判斷，當播放器的寬高小於某個值的時候會進行重置，
//因為當播放器很小的時候真的太難看了，所以強迫症的我弄了點處理措施
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);
}

⑶這裡是跟顯示相關的函式

//show about
//這裡基本上都是迴圈實現的過程
//跳轉點樣式變化
//當跳轉到某張圖片時，對應的跳轉點設定為高亮
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`);
}
//左滑動的效果實現
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);
}
//右滑動的效果實現
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);
}
//相關跳轉點被點選時的事件處理函式，我這裡用來live，但現在的jquery都
//不用live，改成on和off了，請大家自己注意，因為我寫這個程式碼的時候還不
//知道，寫完才知道的。後面也不想改了。請大家諒解
//這裡的處理過程是：通過獲取高亮的跳轉點的class值來判斷是哪張
//圖片要進行跳轉
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);
}
//淡入淡出效果的實現函式
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);
}

⑷控制相關的函式

//control about
//跳轉點被點選時觸發的效果，兩個函式：一個是滑動的觸發，一個是fade的
//觸發，這裡的圖片滑動方向的判斷機制是：通過判斷 被點選的點 與 當前點
//的位置來判斷進行左移或者右移，fade函式無判斷機制
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);
            });
        }
    })
}
//判斷是否有懸停，是否自動播放，以及跳轉的方式等等
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);
        })
    }
}

⑸最後是呼叫了

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);
//這個是觸發函式
function Tri(){
    $(`.slider_box_right_turnTo`).trigger(`click`);
}

到這裡我們的編寫就基本完成了，實際上上述程式碼還是可繼續擴充的，比如說通過判斷調整內容區域顯示的位置，或者新增新的跳轉方式，或者將跳轉點設定為相應的小圖片等等。。雖然我不知道我到底寫得算不算及格，但本人寫可擴充性的程式碼的目的達到了，這裡也和大家分享一下，歡迎大家多多交流。求大神輕噴！

jQuery Mobile圖片輪轉輪播
2014-10-15
jQuery
直播app原始碼，使用vue-awesome-swiper建立輪播圖幻燈片
2023-04-18
APP原始碼Vue
（轉）jquery實現圖片輪播
2013-12-28
jQuery
java學習---前端---使用JavaScript和jQuery實現圖片輪播圖
2020-10-28
前端JavaScriptjQuery
VUE開發一個圖片輪播的元件
2017-03-05
Vue元件
如何將PPT幻燈片轉換為圖片
2016-11-21
ECMAScript對資料夾圖片幻燈片播放
2016-09-13
JQuery實現圖片輪播無縫滾動
2022-06-28
jQuery
圖片輪播--純css
2018-05-15
CSS
幻燈片式圖片瀏覽器
2014-07-01
瀏覽器
jQuery實現3D圖片輪播詳解
2018-12-02
jQuery3D
iOS無限輪播圖片
2016-09-03
iOS
圖片輪播元件實現
2017-10-22
元件
60款很酷的 jQuery 幻燈片演示和下載
2015-07-26
jQuery
剪映倒影幻燈片特效如何開啟？剪映倒影幻燈片特效的設定方法
2020-12-27
特效
幻燈片放映模式切換windows terminal背景圖片
2021-04-10
模式Windows
文字輪播與圖片輪播？CSS 不在話下
2022-06-07
CSS
造輪子之圖片輪播元件(swiper)
2019-01-03
元件
[外掛擴充套件]幻燈片 | 滾動圖片外掛
2020-04-04
套件
Android 和 iOS 圖片輪播
2019-02-26
AndroidiOS
web前端入門到實戰：簡單的圖片輪播
2020-01-13
Web前端
實現簡單的輪播圖（單張圖片、多張圖片）
2020-02-11
DDD for everyone - Google 幻燈片
2018-11-27
Go
Nivo Slider - 世界上最棒的 jQuery 圖片輪播外掛
2014-07-30
IDEjQuery
[譯] 別再使用圖片輪播了
2017-08-23
自定義圖片輪播控制元件
2015-12-24
控制元件
jQuery輪播圖之上下輪播
2018-06-30
jQuery
iOS開發之ImageView複用實現圖片無限輪播
2015-12-03
iOSView
動態等比例調整圖片大小的jQuery程式碼
2017-03-06
jQuery
Excel如何調整圖片大小
2016-11-21
Excel
Bootstrap3的響應式縮圖幻燈輪播效果設計
2015-01-05
boot
24個最受歡迎的jQuery畫廊和幻燈片外掛
2012-04-07
jQuery
AndroidApp圖片輪播效果的元件化
2017-07-15
AndroidAPP元件化
原生幻燈片封裝學習
2018-11-02
封裝
Java 插入公式到PPT幻燈片
2022-07-14
Java公式
Vue封裝Swiper實現圖片輪播
2018-02-06
Vue封裝
用原生js實現圖片輪播器
2018-03-08
JS
安卓之viewPager簡單用法圖片輪播
2018-04-19
安卓Viewpager

【jquery前端開發】可調整的幻燈片(圖片輪播)薦

相關文章