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

一、传统轮播

<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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,980评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,178评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,868评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,498评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,492评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,521评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,910评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,569评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,793评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,342评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,931评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2赞 342

推荐阅读更多精彩内容