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

jquery 专栏收录该内容
5 篇文章 0 订阅

使用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: 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文件
<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: 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"> &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>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

WJM_Aunt

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值