jQuery传统轮播、三位置轮播、呼吸轮播

作者: 路人_Ding | 来源:发表于2018-08-21 20:02 被阅读0次

一、传统轮播

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    img{
        border:0;
    }
    ol, ul ,li{list-style: none;}
    .carousel{
        width: 560px;
        height: 300px;
        margin:100px auto;
        border:1px solid orange;
        position:relative;
        overflow:hidden;
    }
    .btns a{
        width: 40px;
        height: 40px;
        background-color:skyblue;
        position:absolute;
        top: 50%;
        margin-top:-20px;
        z-index:999999;
    }
    .btns a.rightBtn{
        right:0;
    }
    .carousel .m_unit{
        width:9000px;
        position:absolute;
        top: 0;
        left:0;
    }
    .carousel .m_unit ul li {
        width: 560px;
        height: 300px;
        float: left;
        overflow:hidden;
    }
    .circles {
        position:absolute;
        width: 150px;
        height: 18px;
        bottom: 10px;
        left:50%;
        margin-left: -75px;
    }
    .circles ol {
        list-style:none;
    }
    .circles ol li {
        float: left;
        width: 18px;
        height: 18px;
        border-radius:50%;
        margin-right: 10px;
        background-color:skyblue;
        cursor:pointer;
    }
    .circles ol li.cur{
        background-color:purple;
    }
</style>
</head>
<body>
<div class="carousel">
    <!-- 按钮 -->
    <div class="btns">
        <a href="javascript:;" class="leftBtn"></a>
        <a href="javascript:;" class="rightBtn"></a>
    </div>
    <!-- 图片 -->
    <div class="m_unit">
        <ul>
            <li><a href=""><img src="images/0.jpg" alt="" /></a></li>
            <li><a href=""><img src="images/1.jpg" alt="" /></a></li>
            <li><a href=""><img src="images/2.jpg" alt="" /></a></li>
            <li><a href=""><img src="images/3.jpg" alt="" /></a></li>
            <li><a href=""><img src="images/4.jpg" alt="" /></a></li>
        </ul>
    </div>
    <!-- 小圆点 -->
    <div class="circles">
        <ol>
            <li class="cur"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</div>
<script src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
var $circlesLis=$(".circles ol li");
//克隆第一个li，并且追加到ul里面去
 $(".m_unit ul li:first").clone().appendTo(".m_unit ul");

 //定时器
 var time=setInterval(rightBtnHandler, 4000);
 //鼠标进入事件
 $(".carousel").mouseenter(function() {
     clearInterval(time);
 });
 //鼠标离开事件
 $(".carousel").mouseleave(function() {
     time=setInterval(rightBtnHandler, 4000);
 });
 //信号量
 var idx=0;

 //右按钮监听
 $(".rightBtn").click(rightBtnHandler);

 function rightBtnHandler() {
     //防止触发多次点击动画
     if ($(".m_unit").is(":animated")) {
         return;
     }
     idx++;
     $(".m_unit").animate({
         "left": -560 * idx
     }, 600, function() {
         if (idx > 4) {
             idx = 0;
             $(this).css("left", 0);
         }
     });
     changeCircle();
 }
 //左按钮监听
 $(".leftBtn").click(function() {
     //防止触发多次点击动画
     if ($(".m_unit").is(":animated")) {
         return;
     }
     //具体业务
     idx--;
     if (idx < 0) {
         idx = 4;
         $(".m_unit").css("left", -5 * 560);
     }
     $(".m_unit").animate({
         "left": -560 * idx
     }, 600);
     changeCircle();

 });

 //小圆点监听
 $circlesLis.click(function () {
    idx=$(this).index();
    $(".m_unit").animate({"left": -560*idx},600);
    changeCircle();
 });


 //更改小圆点
 function changeCircle() {
    var n=idx<=4?idx:0;
    $circlesLis.eq(n).addClass("cur").siblings().removeClass("cur");
 }
</script>

二、三位置轮播

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    img{
        border:0;
    }
    ol, ul ,li{list-style: none;}
    .carousel {
        width: 560px;
        height:300px;
        border:1px solid #ccc;
        margin:100px auto;
        position:relative;
        overflow:hidden;
    }
    .carousel .imageList ul li {
        position:absolute;
        top: 0;
        left:560px;
        width: 560px;
        height: 300px;
    }
    .carousel .imageList ul li.first{
        left:0;
    }
    .btns a{
        position:absolute;
        width:40px;
        height: 30px;
        background-color:skyblue;
        top:50%;
        z-index:999999;
    }
    .btns a.rightBtn {
        right:0;
    }
    .circles {
        position: absolute;
        width: 150px;
        height: 20px;
        bottom:10px;
        left:50%;
        margin-left: -75px;
    }
    .circles ol li {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        float: left;
        border-radius:50%;
        background-color:skyblue;
        cursor:pointer;
    }
    .circles .cur{
        background-color:black;
    }
</style>
</head>
<body>
<div class="carousel" id="carousel">
    <!-- 按钮 -->
    <div class="btns">
        <a href="javascript:;" id="leftBtn" class="leftBtn"></a>
        <a href="javascript:;" id="rightBtn" class="rightBtn"></a>
    </div>

    <!-- 图片 -->
    <div class="imageList" id="imageList">
        <ul id="imgs">
        <li class="first"><a href="#"><img src="images/0.jpg" alt="" /></a></li>
        <li ><a href="#"><img src="images/1.jpg" alt="" /></a></li>
        <li ><a href="#"><img src="images/2.jpg" alt="" /></a></li>
        <li ><a href="#"><img src="images/3.jpg" alt="" /></a></li>
        <li ><a href="#"><img src="images/4.jpg" alt="" /></a></li>
        </ul>
    </div>
    <!-- 小圆点 -->
    <div class="circles" id="circles">
        <ol>
            <li class="cur"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</div>

<script src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
//获取元素
var $leftBtn=$("#leftBtn");
var $rightBtn=$("#rightBtn");
var $circles=$(".circles ol li");
var $imageList=("#imageList");
var $imgs = $("#imgs li");
//数量
var amount= $circles.length;
//定时器
var time=setInterval(rightBtnHandler, 2000);
//鼠标进入清除定时器
$circles.mouseenter(function() {
    clearInterval(time);
});
//鼠标离开时恢复定时器
$circles.mouseleave(function() {
    time=setInterval(rightBtnHandler, 2000);
});
     var idx=0;
     //右按钮
     $rightBtn.click(rightBtnHandler);
     function rightBtnHandler () {
        //防止多次触发动画
        if ($imgs.is(":animated")){
            return;
        };
        //老图消失
        $imgs.eq(idx).animate({"left":-560}, 500);
        //信号量改变
        //新图入场
        idx++;
        //判断信号量
        if (idx>amount-1) {
            idx=0;
        };
        //新图入场瞬间到位
        $imgs.eq(idx).css("left",560);
        //新图入场
        $imgs.eq(idx).animate({"left":0},500);
        changeCircle();
     }
     //左按钮
     $leftBtn.click(function () {
        //防止动画多次点击
        if ($imgs.is(":animated")) {
            return;
        };
        //老图退场，退场位置去了右面
        $imgs.eq(idx).animate({"left":560},500);
        //信号量改变
        idx--;
        //信号量判断
        if (idx<0) {
            idx=amount-1;
        };
        //新图进场
        $imgs.eq(idx).css("left",-560).animate({"left":0},500);
        changeCircle();
     });

     //小圆点监听事件
     $circles.mouseenter(function(event) {
        //判断小圆点在哪边
        var i=$(this).index();
        //如果事件小圆点大于当前图片位置，图片从右侧进入
        if (i>idx) {
            //老图退场
            $imgs.eq(idx).animate({"left":-560},500);
            //新图进场瞬移
            idx=i;
            $imgs.eq(idx).css("left",560)
            //新图进场
            $imgs.eq(idx).stop(true,true).animate({"left":0},500)
            changeCircle();
        };

        //如果事件小圆点小于当前图片位置，图片从左侧进入
        if (i<idx) {
            //老图退场
            $imgs.eq(idx).animate({"left":560},500);
            //新图进场瞬移
            idx=i;
            $imgs.eq(idx).css("left",-560);
            //新图进场
            $imgs.eq(idx).stop(true,true).animate({"left":0},500);
            changeCircle();
        };
     });



          //更改小圆点
 function changeCircle() {
    var n=idx<=4?idx:0;
    //排他
    $circles.eq(n).addClass("cur").siblings().removeClass("cur");
 }
</script>

三、呼吸轮播

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;}
    .carousel{
        width:560px;
        height: 300px;
        border:1px solid #ccc;
        position:relative;
        margin:100px auto;
    }
    .carousel .imageList ul li {
        width: 560px;
        height: 300px;
        position:absolute;
        display:none;
        top: 0;
        left:0;
    }
    .carousel .imageList ul li.first{
        display:block;
    }
    .btns a {
        position: absolute;
        width: 30px;
        height: 30px;
        top: 50%;
        z-index:9999;
        background-color:skyblue;
    }
    .btns a#rightBtn{
        right: 0;
    }
    .circles {
        position:absolute;
        width: 150px;
        height: 18px;
        bottom:10px;
        left:50%;
        margin-left: -75px;
    }
    .circles ol li {
        width: 18px;
        height: 18px;
        background-color:skyblue;
        border-radius:50%;
        margin-right: 10px;
        float: left;
    }
    .circles .cur {
        background-color:#333;
    }
</style>
</head>
<body>
<div class="carousel">
    <!-- 按钮 -->
    <div class="btns">
        <a href="javascript:;" id="rightBtn"></a>
        <a href="javascript:;" id="leftBtn"></a>
    </div>
    <!-- 图片 -->
    <div class="imageList">
        <ul>
           <li class="first"><a href="#"><img src="images/0.jpg" alt="" /></a></li>
           <li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
           <li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
           <li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
           <li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
        </ul>
    </div>
    <!-- 小圆点 -->
    <div class="circles">
        <ol>
            <li class="cur"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</div>

<script src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
     //获取元素
     var $lis=$(".imageList ul li");
     var $rightBtn=$("#rightBtn");
     var $leftBtn=$("#leftBtn");
     var $circles=$(".circles ol li")
     //信号量
     var idx=0;
     //定时器
     var time=setInterval(rightBtnHandler, 2000);
     //鼠标进入小圆点清除定时器
     $circles.mouseenter(function() {
        clearInterval(time);
     });
     //鼠标离开恢复定时器
     $circles.mouseleave(function(event) {
        time=setInterval(rightBtnHandler, 2000);
     });
     //右按钮添加监听事件
     $rightBtn.click(rightBtnHandler);

     function rightBtnHandler() {
        //防止多次点击动画
        if ($lis.eq(idx).is(":animated")) {
            return;
        };
        //老图淡出
        $lis.eq(idx).fadeOut(1000);
        //信号量改变
        idx++;
        if (idx>$lis.length-1) {
            idx=0
        };
        //新图淡入
        $lis.eq(idx).fadeIn(1000);
        $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
     }

     //左按钮添加监听事件
     $leftBtn.click(function() {
         //防止多次点击动画
         if($lis.eq(idx).is(":animated")) {
             return;
         }
         //老图淡出
         $lis.eq(idx).fadeOut(1000);
         //信号量改变
         idx--;
         if (idx < 0) {
             idx = $lis.length - 1;
         }
         //新图淡入
         $lis.eq(idx).fadeIn(1000);
         $circles.eq(idx).addClass("cur").siblings().removeClass("cur");

     });

     //小圆点事件
     $circles.mouseenter(function() {
        //老图淡出
        $lis.eq(idx).stop(true).fadeOut(1000);
        //信号量改变
        idx=$(this).index();
        //新图淡入
        $lis.eq(idx).stop(true).fadeIn(1000);
        //改变小圆点
         $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
     });
</script>

jQuery传统轮播、三位置轮播、呼吸轮播

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读