• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jquery实现呼吸轮播效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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>

运行结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery实现呼吸轮播图发布时间:2022-02-05
下一篇:
jquery实现百叶窗效果(利用li的定位)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap