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

使用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"> < div>
    <div class="btn right"> > 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>

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


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

你可能感兴趣的:(jquery)