bootstrap圖片輪播+導航欄效果

阿新 • • 發佈：2019-02-17

這仍然是對本學期軟體工程大作業的總結。
在完成這次大作業時，感覺這次寫的導航欄和輪播圖片效果還好，特此放出效果圖和程式碼。

下面是這次的效果圖：
這裡寫圖片描述

最後附上程式碼：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>軟院知社-首頁</title>
 <link 
 href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<style>
.top {
    background-color: #404A54;
    height: 60px;
}

.top * {
    color: #FFF;
}

.top li {
    font-size: 18px;
    margin-top 
: 7px;
    margin-left: 10px;
}

.navbar-brand {
    font-size: 22px;
    margin-top: 7px;
}

.footer {
    background-color: #404A54;
    height: 400px;
}
.jumbotron {
    padding: 10px 30px 10px 30px;
}

.jumbotron p {
    font-size: 14px;
    line-height: 2.0;
}

.jumbotron h4 {
    font-size: 16px;
    font-family 
: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.8;
}

.beleft {
    float: left;
    margin-left: 100px;
}

.carousel {
    height: 500px;
    margin-bottom: 30px;
}

.carousel .item {
    height: 500px;
}

.carousel img {
    min-height: 500px;
    width: 100%;
}

</style>
</head>
<body>
    <div class="navbar-fixed-top top" role="navigation" id="menu-nav"
         >
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-collapse">
            <span class="sr-only"></span> <span class="icon-bar"> </span> <span
                class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html"><b>軟院知社</b></a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">首頁</a></li>
            <li><a href="courselist.html">課程</a></li>
            <li><a href="resouces.html">資源</a></li>
            <li><a href="questionlist.html">問答</a></li>

        </ul>
        <div class="user" id="logControll" ng-controller="navUserController"
            style="position: absolute; top: 25px; right: 60px;">
            <span class="glyphicon glyphicon-user"></span> <span
                class="user-name" style="cursor:pointer"onclick="personalPage(this)">{{navUsername}}</span>
            <span id="logout" onclick="logout()" style="display:none;margin-left:20px;color:#DDD;cursor:pointer;">退出</span>
        </div>

    </div>
</div>

        </div>

    <div id="ad-carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#ad-carousel" data-slide-to="1"></li>

        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/ruanyuan01.jpg" alt="0 slide">

                <div class="container">
                    <div class="carousel-caption"
                        style="position: absolute; top: 250px;width:250px;margin-left:auto;margin-right:auto;">
                        <h1>軟院知社</h1>

                        <p>在這裡，你能得到第一手的課程資源</p>

                        <p id="reg">
                            <a class="btn btn-lg btn-primary" href="register.html"
                                role="button">先去註冊</a>
                        </p>
                    </div>
                </div>

            </div>
            <div class="item">
                <img src="img/ruanyuan02.jpg" alt="1 slide">

                <div class="container">
                    <div class="carousel-caption"
                        style="position: absolute; top: 250px;width:250px;margin-left:auto;margin-right:auto;">
                        <h1>軟院知社</h1>

                        <p>對課程有疑問？軟院各路大神為您解答</p>

                        <p id="lgn">
                            <button class="btn btn-lg btn-primary" onclick="login()">馬上登入</button>
                        </p>
                    </div>
                </div>

            </div>


        </div>
        <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a> <a
            class="right carousel-control" href="#ad-carousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
        <div style="position: absolute; left: 100px; top: 100px;"></div>
    </div>






    <script>
        $(function() {
            $('#ad-carousel').carousel();
            $('#menu-nav .navbar-collapse a').click(function(e) {
                var href = $(this).attr('href');
                var tabId = $(this).attr('data-tab');
                if ('#' !== href) {
                    e.preventDefault();
                    $(document).scrollTop($(href).offset().top - 70);
                    if (tabId) {
                        $('#feature-tab a[href=#' + tabId + ']').tab('show');
                    }
                }
            });
        });

    </script>




</body>
</html>

bootstrap圖片輪播+導航欄效果

這仍然是對本學期軟體工程大作業的總結。在完成這次大作業時，感覺這次寫的導航欄和輪播圖片效果還好，特此放出效果圖和程式碼。下面是這次的效果圖：最後附上程式碼： <!DOCT

bootstrap製作輪播圖,水平導航欄,垂直導航欄

1.官網下載bootstrap https://v3.bootcss.com/ 2.引入js和相應的css 此處引用的是themeleaf寫法 <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet"&g

實現廣告圖片輪播效果-AndroidImageSild

left anim wpa img listener pri des indicator ext 在AS中的使用： 1.在build文件中進行配置 compile ‘com.squareup.picasso:picasso:2.3.2‘ comp

JS實例之圖片輪播，實現圖片播放效果

utf length pla get eight code func nsh java 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

使用JQuery實現圖片輪播效果

left 簡述 flow href 集合 jpg -i round 輪播【效果如圖】【原理簡述】這裏大概說一下整個流程： 1，將除了第一張以外的圖片全部隱藏， 2，獲取第一張圖片的alt信息顯示在信息欄，並添加點擊事件 3，為4個按鈕添加點擊偵聽，點擊相應的按鈕，用

RollViewPager圖片輪播效果開源框架的使用

ntp end drawable setimage ada create emc 效果好方案 RollViewPager是一個自動輪播的Viewpager，支持無限循環。觸摸時會暫停播放，直到結束觸摸一個延遲周期以後繼續播放。看起來就像這樣。指示器可以為點可以為數字

Flexslider插件實現圖片輪播、文字圖片相結合滑動切換效果

remove 12px body 類型 ons art cal 選項 csharp 插件下載：　　點擊下載密碼: fbeg Flexslider具有以下特性：支持滑動和淡入淡出效果。支持水平、垂直方向滑動。支持鍵盤方向鍵控制。支持觸控滑動。支

簡單的圖片輪播效果

ear mar enter etc block height att 代碼 tag 用js代碼來實現一個簡單的圖片輪播效果鼠標移入圖片後顯示左右箭頭按鈕，點擊就可以實現圖片的切換。以下分別是html代碼和js代碼，歡迎批評和討論！ <!DOCTYPE html

使用Ajax+jQuery來實現前端收到的數據在console上顯示+簡單的主頁設計與bootstrap插件實現圖片輪播

value size 靠譜實現圖 active length oot function 想要 1.實現前端輸入的數據在console上顯示上一篇是解決了在前端的輸入信息在cygwin上顯示，這次要給前臺們能看見的數據，因為數據庫裏插入的數據少，所以寫的語句翻來覆去就那幾

JS實現定時操作圖片輪播效果（setInterval）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=functi

jq + css 實現簡單的圖片輪播效果

jq + css 實現簡單的圖片輪播效果開發過程中需要用到圖片輪播的外掛，在網上找了幾個外掛之後還是決定自己碼一個，比較簡潔的功能，以後說不定還會有用。 ps：功能比較簡單，整個框並不能根據圖片的大小自動調節，這裡所用的圖片是1170*500的，如果需要改成其他大小的圖片，自行

使用js實現html首頁圖片輪播效果

第一步：確定事件(onload)併為其繫結一個函式瀏覽器是邊載入邊執行的，先載入head 再載入body。瞭解body的onload事件的執行時間是非常重要的。onload事件是在網頁載入完畢時執行的。當我們在JavaScript中想要操作某元素時而此元素還沒有載入完成（

bootstrap原來自帶圖片輪播功能

bootstrap圖片輪播最近學習bootstrap的時候幸運發現原來裡面有一個自帶的網頁圖片輪播圖，功能齊全，屬於很標準的輪播型別。我異常興奮，前些天還在自己用js寫輪播程式碼，今天就發現

使用jQuery快速高效製作網頁互動特效第五章上機練習四製作廣告圖片輪播切換效果

輪播應有的功能大致都有，分享給一些在學的朋友參考學習。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 廣告圖片輪播切

html中使用JS實現圖片輪播效果

HTML 部分 <div id="bannner" class="main_center_bannar">

html+css+js簡單實現圖片輪播效果

ScrollRect滑動優化(四)_Unity—Item圖片輪播效果

直接看效果好了，我只弄了兩張圖片。支援左右滑動。大致實現原理是滑動快結束時進行每個item下一位置的計算，之後再次滑動。待會我會上傳demo，喜歡的就直接去下載好了。註釋自己寫了不少，方便我調整，如果有更好實現的方式，麻煩請告知，網上看無限滑動的例子很多都

jquery實現圖片輪播圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:n

bootstrap 輪播圖動畫效果

<div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <c:

+【CSS3】使用純css程式碼實現圖片輪播效果

使用純CSS3程式碼實現簡單的圖片輪播。基本思路：以5張圖片為例： 1.基本佈局：將5張圖片左浮動橫向並排放入一個div容器（#photos）內，圖片設定統一尺寸，div寬度設定5個圖片的總尺寸，然後放入相框容器div（#frame），相框設定1個圖片

bootstrap圖片輪播+導航欄效果

相關推薦