【jquery前端开发】可调整的幻灯片(图片轮播)

发布时间：2020-07-15 14:53:20 来源：网络阅读：1006 作者：okmnji54 栏目：web开发

第一次写博客，希望接下来写的东西或多或少能帮到些人，虽然这些东西都是一些大神前辈们写了无数遍的东西，但我尽量以一名小白的视角把代码写得清楚点，好心人的就给点赞吧。

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,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;}

上面这些是消除浏览器默认样式的代码----恩，我复制的。

/************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" ></div><ul class="slider_box_pointBox_turnTo"></ul><div class="slider_box_right_turnTo" ></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');
}

到这里我们的编写就基本完成了，实际上上述代码还是可继续拓展的，比如说通过判断调整内容区域显示的位置，或者添加新的跳转方式，或者将跳转点设置为相应的小图片等等。。虽然我不知道我到底写得算不算及格，但本人写可拓展性的代码的目的达到了，这里也和大家分享一下，欢迎大家多多交流。求大神轻喷！

附件：http://down.51cto.com/data/2364266

向AI问一下细节

【jquery前端开发】可调整的幻灯片(图片轮播)

猜你喜欢

最新资讯

相关推荐

相关标签