使用jQuery做简单的图片轮播效果

一、本特效主要用到的前端知识点

CSS中绝对定位（absolute）
CSS实现垂直居中
jQuery中简单的淡入淡出动画效果（fadeIn，fadeOut）
定时器（setInterval，clearInterval）
jQuery中增删类（addClass，removeClass）

二、特效分析

网页开始加载的时候，图片开始做轮播，效果为淡入淡出。当轮播到最后一个图片，从第一个图片开始重新做轮播。

图片与下面的圆点相对应，鼠标移入该圆点时，对应图片淡入，圆点增加当前样式。

左右两边附有左右按钮，点击左按钮，当前图片的左边图片淡入，当左边图片至第一个时，从最后一个图片依次向左重新淡入；点击右按钮，当前图片的右边图片淡入，当右边图片至最后一个时，从第一个图片依次向右重新淡入。

三、逻辑操作

（一）HTML

<div class="container">

    <div class="box">

        <img src="https://img-blog.csdn.net/20170908172159479">

        <img src="https://img-blog.csdn.net/20170908172353986">

        <img src="https://img-blog.csdn.net/20170908172424315">

        <img src="https://img-blog.csdn.net/20170908172444061">

        <img src="https://img-blog.csdn.net/20170908172525692">

        <img src="https://img-blog.csdn.net/20170908172549035">

    </div>

    <div class="circle">

        <b class="current"></b>

        <b></b>

        <b></b>

        <b></b>

        <b></b>

        <b></b>

    </div>

    <div class="btn left"> &lt; </div>

    <div class="btn right"> &gt; </div>

</div>

html样式没有什么难点，都是最基本的样式。

（二）CSS样式

.container {

    position: absolute;

    top: 100px;

    left: 100px;

    width: 600px;

    height: 270px;

}

/*使用绝对定位，使全部图片叠加到一块*/

.box, .box img {

    position: absolute;

    top:;

    left:;

}

/*下面小圆点，使用绝对定位，位于图片的正下方*/

.circle {

    width: 200px;

    height: 14px;

    position: absolute;

    bottom: 15px;

    left: 50%;

    margin-left: -100px;

    text-align: center;

    cursor: pointer;

}

/*每个小圆点的样式*/

.circle b {

    display: inline-block;

    width: 14px;

    height: 14px;

    background-color: #000;

    border-radius: 50%;

    margin: 3px;

}

/*小圆点的当前样式，也是鼠标移上去的样式*/

.circle .current {

    background-color: #fff;

}

/*左右两侧的按钮，采用绝对定位*/

.btn {

    position: absolute;

    top: 50%;

    width: 40px;

    height: 50px;

    margin-top: -25px;

    background-color: rgba(255, 255, 255, .7);

    text-align: center;

    line-height: 50px;

    font-size: 50px;

    cursor: pointer;

}

.left {

    left:;

}

.right {

    right:;

}

CSS样式里面需要的注意的是垂直居中的两种方法：

a、使用绝对定位
top: 50%;然后再设置margin-top的值为要居中元素的高的-(1/2)，也就是再向上移动该元素的高的1/2距离；这个方法对于水平居中也是有效的，left: 50%;然后再设置margin-left的值为要居中元素的宽的-(1/2);

b、使用line-height属性，使line-height属性值和该元素的height属性值相同。

（三） jQuery动态效果

（三） jQuery动态效果

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

<script type="text/javascript">

    /*i表示当前图片的下标和当前圆点的下标（图片和圆点是对应关系）*/

    var i = 0;

    var timer;

    $(function(){

        /*Step 1： 设置页面刚加载出来显示的是第一张图片*/

        $("img").eq(0).show().siblings().hide();

        /*开始做图片轮播，使用定时器*/

        start();

        /*Step 2： 鼠标移入小圆点的时候，首先清除定时器，找到当前圆点的索引，改变当前显示的图片，使其变换成圆点对应的图片，当前圆点变换样式*/

        $("b").hover(function(){

            clearInterval(timer);

            i = $(this).index();

            change();

        }, function(){

            /*鼠标移出的时候，重新启动定时器*/

            start();

        });

        /*Step 3： 点击左边按钮时候，显示当前图片的左边的第一个图片，再点击，依次向左，图片变换，圆点样式变换。当停止点击按钮时，图片依旧一定时间内显示下一个图片（右边的第一个）*/

        $(".left").click(function(){

            i--;

            /*当图片已经是第一个，再点击的时候，显示最后一张图片*/

            if(i == -1){

                i = 5;

            }

            change();

        });

        /*Step 4： 点击右边按钮时候，显示当前图片的右边的第一个图片，原理同左边图片效果*/

        $(".right").click(function(){

            i++;

            /*当图片已经是最后一个，再点击的时候，显示第一张图片*/

            if(i == 6){

                i = 0;

            }

            change();

        });

    });

    /*开始轮播函数*/

    function start(){

        /*定时器，每个图片在页面上停留的时间是3s*/

        timer = setInterval(function(){

            i++;

            if(i == 6){

                i = 0;

            }

            change();

        }, 3000);

    }

    /*当前图片及对应圆点变换函数*/

    function change(){

        /*当前图片淡入，其他图片淡出*/

        $("img").eq(i).fadeIn(300).siblings().stop(true, true).fadeOut(300);

        /*当前圆点添加类current，其他圆点删除其类current*/

        $("b").eq(i).addClass("current").siblings().removeClass("current");

    }

</script>

这个方法做轮播对我来说是比较简单的，思维逻辑清晰，代码也简单。

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>轮播图制作</title>

        <style>

            .container {

                position: absolute;

                top: 100px;

                left: 100px;

                width: 600px;

                height: 270px;

            }

            .box, .box img {

                position: absolute;

                top:;

                left:;

            }

            .circle {

                width: 200px;

                height: 14px;

                position: absolute;

                bottom: 15px;

                left: 50%;

                margin-left: -100px;

                text-align: center;

                cursor: pointer;

            }

            .circle b {

                display: inline-block;

                width: 14px;

                height: 14px;

                background-color: #000;

                border-radius: 50%;

                margin: 3px;

            }

            .circle .current {

                background-color: #fff;

            }

            .btn {

                position: absolute;

                top: 50%;

                width: 40px;

                height: 50px;

                margin-top: -25px;

                background-color: rgba(255, 255, 255, .7);

                text-align: center;

                line-height: 40px;

                font-size: 50px;

                cursor: pointer;

            }

            .left {

                left:;

            }

            .right {

                right:;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="box">

                <img src="https://img-blog.csdn.net/20170908172159479">

                <img src="https://img-blog.csdn.net/20170908172353986">

                <img src="https://img-blog.csdn.net/20170908172424315">

                <img src="https://img-blog.csdn.net/20170908172444061">

                <img src="https://img-blog.csdn.net/20170908172525692">

                <img src="https://img-blog.csdn.net/20170908172549035">

            </div>

            <div class="circle">

                <b class="current"></b>

                <b></b>

                <b></b>

                <b></b>

                <b></b>

                <b></b>

            </div>

            <div class="btn left"> &lt; </div>

            <div class="btn right"> &gt; </div>

        </div>

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

        <script type="text/javascript">

            var i = 0;

            var timer;

            $(function(){

                $("img").eq(0).show().siblings().hide();

                start();

                $("b").hover(function(){

                    clearInterval(timer);

                    i = $(this).index();

                    change();

                }, function(){

                    start();

                });

                $(".left").click(function(){

                    i--;

                    if(i == -1){

                        i = 5;

                    }

                    change();

                });

                $(".right").click(function(){

                    i++;

                    if(i == 6){

                        i = 0;

                    }

                    change();

                });

            });

            function start(){

                timer = setInterval(function(){

                    i++;

                    if(i == 6){

                        i = 0;

                    }

                    change();

                }, 3000);

            }

            function change(){

                $("img").eq(i).fadeIn(300).siblings().stop(true, true).fadeOut(300);

                $("b").eq(i).addClass("current").siblings().removeClass("current");

            }

        </script>

    </body>

</html>