美文网首页
jQuery传统轮播、三位置轮播、呼吸轮播

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传统轮播、三位置轮播、呼吸轮播

    一、传统轮播 二、三位置轮播 三、呼吸轮播

  • 无标题文章

    轮播图分为：传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色，各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为：传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步，得到元素 第二步，设置...

  • 项目-轮播图

    整个轮播图分为三部分：轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多，...

  • Vue轮播图的实现以及其与jQuery轮播图的简单对比

    最近在学习Vue，然后做了一个轮播图，然后想起之前用jQuery做的轮播图，就打算进行一个对比。 jQuery轮播...

  • 关于呼吸轮播图

    轮播图这厮是我们浏览网页时常见的一种形式。而相较传统的轮播图而言，呼吸轮播图具有更美观，更cool，更多特效。因而...

  • 第三方库之 banner

    Android 广告图片轮播控件，支持无限循环和多种主题，可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加...

  • 用 jQuery 做个轮播

    初次体验jQuery 之后，体验一下jQuery强大之处，做一个简单的轮播，实现图片切换。 点击按钮切换轮播 页面...

  • 传统&呼吸 轮播

    传统的轮播图 一个 carousel 轮播图，图片实现自动轮播，可以左右按钮播放，点小圆点也能实现换图。同时设置节...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题：一、什么是轮播图？二、怎么实现轮播效果？三、轮播图还有什么小功能可以实现...

网友评论

      本文标题：jQuery传统轮播、三位置轮播、呼吸轮播

      本文链接：https://www.haomeiwen.com/subject/evfsiftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|jQuery传统轮播、三位置轮播、呼吸轮播|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！