jquery实现呼吸轮播效果

196 阅读 0 评论 130 点赞

我是靠谱客的博主犹豫豌豆，最近开发中收集的这篇文章主要介绍jquery实现呼吸轮播效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了jquery实现呼吸轮播效果的具体代码，供大家参考，具体内容如下

大概思路：

呼吸轮播就是图片淡入淡出轮播。
div（设置相对定位）里存放ul，li不需要float：left，设置绝对定位即可。left：0，top：0。
此时不需要在所有图片后面补假0.
div里还包括左右按钮，下面小圆点，通过绝对定位，把它们定位到合适位置就好。
设置index为0，点击右按钮时，当前图片淡出，index++，当图片为最后一个的时候，index设置为0，新图片淡入。下面小圆点对应变色。
左按钮思路大致相同。
下面小图片点击的时候，如果点击的和当前显示的index相同，则什么事情都不需要做。
点击其他小圆点的时候，旧的图片淡出，把当前小圆点的index赋值给全局变量index，新图片淡入。
被点击的小圆点变色，其兄弟元素仍然为最初的颜色。

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .big{
        width:560px;
        height:300px;
        position: relative;
        margin:200px auto;
        border:10px solid red;
    }
    .big .move{
        width:5600px;
        height:300px;
        position: absolute;
        left:0;
        top:0;
    }
    .big  .move li{
        /*float: left;*/
        list-style: none;
        display: none;
        position: absolute;
        top:0;
        left:0;
    }
    .big  ul .first{
        display: block;
    }
    img{
        width:560px;
        height:300px;
    }

    .btn div{
        width:40px;
        height:60px;
        background: red;
        position: absolute;
        top:50%;
        margin-top:-30px;
    }
    .rightbtn{
        right:0;
    }

    .circle{
        position: absolute;
        left:0px;
        bottom:0px;
        width:200px;
        height:30px;

    }
    .circle ul{
        /*overflow: hidden;*/
        list-style: none;
        float: left;
    }
    .circleUl li{
        background: white;
        float: left;
        margin-right:10px;

        width:20px;
        height:20px;
        border-radius:50%;
    }


</style>
<body>
<div class="big">

    <ul class="move">
        <li class="first"> <img src="img/0.jpg" alt=""> </li>
        <li> <img src="img/1.jpg" alt=""> </li>
        <li> <img src="img/2.jpg" alt=""> </li>
        <li> <img src="img/3.jpg" alt=""> </li>
    </ul>

    <div class="btn">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
    </div>

    <div class="circle">
        <ul class="circleUl">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>


<script src="js/jquery-1.12.3.min.js">  </script>

<script>
//    设置第一个小圆点为红色
   $(".circleUl li").eq(0).css("background","red");

    var index = 0;
    $(".leftbtn").click(function(){
//        旧的图淡出
        $(".move li").eq(index).fadeOut(400);
        index--;
      if(index<0){
          index = 3;
      }
//        新图淡入
        $(".move li").eq(index).fadeIn(400);
//        对应下标为index的小圆点变色
        $(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
    });


    $(".rightbtn").click(function(){
        $(".move li").eq(index).fadeOut(400);
        index++;
        console.log(index);
        if(index ==4 ){
            index = 0;
        }
        $(".move li").eq(index).fadeIn(400);
        $(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
    });


//    小圆点点击事件
    $(".circleUl li").click(function(){
//       如果本来就显示的图一，再次点击第一个小圆点的话，什么也不做
        if(index == $(this).index()) return;

//        旧的图片淡出
        $(".move li").eq(index).fadeOut(400);

//        点击到哪个小圆点，把小圆点的index赋值给全局变量index （更新全局变量index）
        index =  $(this).index();

        //   新图片淡入
        $(".move li").eq(index).fadeIn(400);
//        小圆点变色
        $(this).css("background","red").siblings().css("background","white");



    })
</script>

</body>
</html>

运行结果：