通过jQuery和Bootstrap来分别实现轮播图

一、通过Bootstrap来实现轮播图

准备好Bootstrap所需的包，轮播图所需的图片，然后就可以开始来写轮播图了。

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div id="carouselMenu" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#carouselMenu" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselMenu" data-slide-to="1" ></li>
                    <li data-target="#carouselMenu" data-slide-to="2" ></li>
                    <li data-target="#carouselMenu" data-slide-to="3" ></li>
                    <li data-target="#carouselMenu" data-slide-to="4" ></li>
                    <li data-target="#carouselMenu" data-slide-to="5" ></li>
                    <li data-target="#carouselMenu" data-slide-to="6" ></li>
                    <li data-target="#carouselMenu" data-slide-to="7" ></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active"><img src="jdimage/1.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/2.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/3.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/4.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/5.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/6.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/7.jpg" alt=""/></div>
                    <div class="item"><img src="jdimage/8.jpg" alt=""/></div>
                </div>
                <a class="carousel-control left" href="#carouselMenu" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#carouselMenu" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

然而，运行上述代码，你会发现该轮播图无法自动播放，这是因为没有设置carousel（）方法。

下面来设置轮播项自动播放：

<script type="text/javascript">
    $(function(){
        /*
        * interval为每个轮播项之间的切换时间
        * wrap定义是否循环轮播
        *
        * */
        $("#carouselMenu").carousel({
            interval: 5000,
            wrap: true
        });
    })
</script>

效果图：

二、通过jQuery来实现轮播图

相比Bootstrap，jQuery实现轮播图就复杂多了。不要忘了导入jQuery所需要的包。
样式：

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .slider {
            height: 340px;
            width: 790px;
            /*
                auto--自动居中对齐
            */
            margin: 100px auto;
            /*
                让slider div居中，如果是absolute，则没有居中
            */
            position: relative;
        }
        /*
            让所有的li中的image不显示
        */
        .slider li {
            position: absolute;
            display: none;
        }
        /*
            设置第一个image为block，也就是显示第一个
        */
        .slider li:first-child {
            display: block;
        }
        /*
            让左右arrow不显示
        */
        .arrow {
            display: none;
        }

        .slider:hover .arrow {
            display: block;
        }

        .arrow-left,
        .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;

        }

        .arrow-left:hover,
        .arrow-right:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        .arrow-left {
            left: 0;
        }

        .arrow-right {
            right: 0;
        }
        /*
            存放切换小图标的div
        */
        .slider .slider-dot {
            width: 38%;
            height: 8%;
            position: absolute;
            top: 90%;
            left: 30%;
            bottom: 30px;
        }
        .slider-i{
            display:inline-block;
            cursor: pointer;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color:#fff;
            margin-top: 5px;
            margin-left: 20px;
            float: left;
        }
        /*
            i图标处于放映时的状态
        */
        .active {
            background-color: red;
        }
    </style>

div：

<div class="slider">
    <ul>
        <li><a href="#"><img src="jdimage/1.jpg" alt=""/></a></li>
        <li><a href="#"><img src="jdimage/2.jpg" alt=""/></a></li>
        <li><a href="#"><img src="jdimage/3.jpg" alt=""/></a></li>
        <li><a href="#"><img src="jdimage/4.jpg" alt=""/></a></li>
        <li><a href="#"><img src="jdimage/5.jpg" alt=""/></a></li>
        <li><a href="#"><img src="jdimage/6.jpg" alt=""/></a></li>
        <li><a href="#"><img src="jdimage/7.jpg" alt=""/></a></li>
        <li><a href="#"><img src="jdimage/8.jpg" alt=""/></a></li>
    </ul>
    <!--
        轮播图切换的箭头
        <代表小于的符号-less than
        >代表大于的符号-greater than
     -->
    <div class="arrow">
        <span class="arrow-left"><</span>
        <span class="arrow-right">></span>
    </div>
    <div class="slider-dot">
        <!--
            这里要用i来制作小图标，用li不能达到效果
        -->
            <i class="slider-i active"></i>
            <i class="slider-i"></i>
            <i class="slider-i"></i>
            <i class="slider-i"></i>
            <i class="slider-i"></i>
            <i class="slider-i"></i>
            <i class="slider-i"></i>
            <i class="slider-i"></i>
    </div>
</div>

核心js代码：

<script>
    var counttime = 0;
    setInterval(function(){
        var time = new Date();
        var seconds = parseInt(time / 1000 % 60);
        //显示出时间秒数-seconds
        console.log(seconds);
        //每20秒自动换一次图
        if(seconds==0 || seconds==20 || seconds==40){
            counttime++;
            /*
            * 当图片切换至最后一张图的时候，调回至最后一张
            * */

            if($(".active").index() == $(".slider li").length-1){
                counttime = 0;
                $(".slider li").eq(counttime).fadeIn().siblings("li").fadeOut();
                $(".slider .slider-dot .slider-i").eq(counttime).addClass("active").siblings().removeClass("active");
            } else {
                $(".slider li").eq(counttime).fadeIn().siblings("li").fadeOut();
                $(".slider .slider-dot .slider-i").eq(counttime).addClass("active").siblings().removeClass("active");
            }
        }
        console.log(":" + $(".active").index());
    }, 1000);

    $(function(){
       var count = 0;
       $(".arrow-right").click(function(){
         count++;
         /*
         * 如果图片到头了,返回第一张图片
         *
         * */
         if(count == $(".slider li").length) {
             count = 0;
         }
         console.log(count);
         /*
         * 让count渐渐的显示，其他兄弟渐渐的隐藏
         * */
         $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();

         /*
         * 让i图标随着右slider切换键而切换
         *
         * */
         $(".slider .slider-dot .slider-i").eq(count).addClass("active").siblings().removeClass("active");

       });
        $(".arrow-left").click(function () {
            count--;
            /*
            * 如果是在第一张图片左翻，则count = length - 1
            * */
            if(count == -1){
                count = $(".slider li").length - 1;
            }
            console.log(count);
            //让count渐渐的显示，其他兄弟渐渐的隐藏
            $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
            /*
             * 让i图标随着左slider切换键而切换
             *
             * */
            $(".slider .slider-dot .slider-i").eq(count).addClass("active").siblings().removeClass("active");

        });

        $(".slider .slider-dot .slider-i").click(function(){

            //打印出点击的i的索引
            //console.log($(this).index());
            var id = $(this).index();
            $(".slider li").eq(id).fadeIn().siblings("li").fadeOut();
            $(".slider .slider-dot .slider-i").eq(id).addClass("active").siblings().removeClass("active");
        });

    });
</script>

效果图：