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

女爷i 2022-06-07 23:52 288阅读 0赞

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

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

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

--------------------

### 二、特效分析 ###

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

![这里写图片描述][20170908141031248]

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

![这里写图片描述][20170908141426497]

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

![这里写图片描述][20170908141651681]

![这里写图片描述][20170908141847973]

--------------------

### 三、逻辑操作 ###

#### （一）HTML ####

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

#### （二）CSS样式 ####

.container { position: absolute; top: 100px; left: 100px; width: 600px; height: 270px; }
    /*使用绝对定位，使全部图片叠加到一块*/
    .box, .box img { position: absolute; top: 0; left: 0; }
    /*下面小圆点，使用绝对定位，位于图片的正下方*/
    .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: 0; }
    .right { right: 0; }

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

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

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

#### （三） jQuery动态效果 ####

文档下方引入jQuery.js文件

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

<!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: 0; left: 0; } .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: 0; } .right { right: 0; } </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"> < </div>
                <div class="btn right"> > </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>

[20170908141031248]: /images/20220608/ceef4fee70124cab9cbb64cfffde3f2f.png
[20170908141426497]: /images/20220608/9ed5277952ee4c7d89fcffe4e9565aba.png
[20170908141651681]: /images/20220608/68e73037a37d4efeb4ddfffb05e50522.png
[20170908141847973]: /images/20220608/d6b8ae9dd34f429fb596d15f5847b9bd.png