通過jQuery和Bootstrap來分別實現輪播圖

阿新 • • 發佈：2019-01-21

一、通過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>

效果圖：

通過jQuery和Bootstrap來分別實現輪播圖

一、通過Bootstrap來實現輪播圖準備好Bootstrap所需的包，輪播圖所需的圖片，然後就可以開始來寫輪播圖了。 <div class="container"> <div class="row"> <div cl

Jquery和純JS實現輪播圖（一）--左右切換式

var cur = 0, //當前的圖片序號 imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgLis.length, //獲取圖片的

在安卓中，怎麼通過ViewPager來實現輪播圖的效果？

//currentPage是一個角標，通過viewPager中的條目獲取當前頁面的角標，假如條目是6，因為%list.size，那麼當前頁面的角標就是0.int currentPage = viewPager.getCurrentItem()%list.size(); //把當前頁面的

Jquery和純JS實現輪播圖（二）--淡入淡出切換式

之前有寫過一篇輪播圖，是左右切換式的，可以參考 Jquery和純JS實現輪播圖（一）–左右切換式今天分享一下淡入淡出式的輪播圖，同樣也是用純js和Jquery兩種方法來實現： JQUERY實現

jQuery實現輪播圖效果

代碼實現 idt 代碼 out 顯示 move posit 技術輪播圖任務實現：用jQuery實現輪播圖。來自瓶子啊之小白，歡迎來訪，歡迎指導。相信大家從事前端的開發者初級就是輪播圖，首先我用jquery寫了一個，第二篇我會用原生JavaScript給大家展示。其原

利用js來實現輪播圖

由於現在很多網站都有輪播圖的存在，所以自己的學著來搗鼓一下下，內容有點長！（1）、首先要先製作好html頁面，利用div盒子來佈局 &nb

JQuery實現輪播圖原始碼

設計：根據上圖可以看出，輪播圖需要以下元素：外面的盒子div、放置圖片集合的盒子ul、放置兩側按鈕的盒子div、下側順序按鈕div 原始碼如下：一、html原始碼如下： <div class="outer"> <ul class="

bootstrap實現輪播圖

<html> <head> <title>Bootstrap 輪播</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bo

bootstrap 實現輪播圖

3.3.7版本 <code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

Android TV利用viewPager實現輪播圖，並通過handler進行邏輯控制

公司要求實現一個輪播圖，滾動圖片及其對應文字。共有五張圖，包含小圓點。最初的實現是參考了https://blog.csdn.net/zhaoxiaojian1213/article/details/78280132，使用ViewPager實現，新開一個執行

jquery 實現輪播圖

<!doctype html> <html> <head> <meta charset="utf-8"> <title>輪播圖</title> <script src="js/jque

詳解vue之better-scroll實現輪播圖和頁面滾動

(該方法只針對移動端使用效果較好，PC端不推薦，使用的版本是[email protected]，其他版本會出錯) 1.安裝better-scroll 在根目錄中package.json的dependencies中新增： "better-scr

jQuery實現輪播圖特效，仿京東——李帥醒部落格

JS程式碼：<script type="text/javascript"> var ArrImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]; var num=ArrImg.lengt

自定義ViewGroup和FrameLayout實現輪播圖（包括底部小圓點）

廣告輪播圖在現在的APP首頁比較常見，主要的實現方式有兩種，一種是通過ViewPager，一種是通過自定義ViewGroup。前者的實現方式比較簡便，本篇文章講的是第二種方法，有人說用ViewPager不是更方便嗎，的確，但是我們通過自己定義ViewGroup，

JQuery 基礎案例（3）—— jQuery實現輪播圖無縫（無回滾）滾動切換效果

輪播圖無縫滾動切換原理基本框架 <div class="slide">  <ul class="slide-nav"> <li class="activ

bootstrap實現輪播圖手指左右滑動事件

參考原文 bootstrap的輪播元件在wap端無法手指滑動在輪播元件後加一段jq $(function () { // 獲取手指在輪播圖元素上的一個滑動方向（左右） // 獲取介面上輪播圖容器 va

jQuery實現輪播圖

ext jquer bsp 全局變量 ins public nbsp cfb interval 　　jQuery實現輪播圖時出現ready方法外無法調用方法（函數） 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.

js實現輪播圖

display lex tee 添加 har scrip con tle win 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

unslider插件實現輪播圖效果

地址 href aid jquery輪播 boot http 用法 .com r.js unslider插件下載地址（含有用法）：http://www.bootcss.com/p/unslider/ 可以　　下載unslider.js文件（http://pan.baidu.

通過jQuery和Bootstrap來分別實現輪播圖

相關推薦