圖片無縫滾動BootStrap 輕鬆實現

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

圖片無縫滾動，不需要繁瑣的javascript程式碼，只需引用BootStrap 中的javascript外掛（Carousel)即可輕鬆實現。來看看吧：
現附上演示地址：

原始碼：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" 
>
    <title>BootStrap 實現圖片無縫滾動</title>
<style>
.body {
    display: block;  
    margin-left: auto;  
    margin-right: auto; 
    float: none; 
    width:800px;
}
</style>
<!-- 新 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]--> 


    <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="js/bootstrap.min.js"></script>
  </head>
  <body>


<div class="body">
 <h1 class="text-center">BootStrap 實現圖片無縫滾動</h1>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 輪播（Carousel）指標 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- 輪播（Carousel）專案內容 -->
  <div class="carousel-inner" role="listbox">
    <!-- 預設顯示圖片 -->
    <div class="item active">
      <img src="img/1.jpg" alt="態生兩靨之愁，嬌襲一身之病。">
     <!-- 圖片描述內容 -->
      <div class="carousel-caption">
        態生兩靨之愁，嬌襲一身之病。
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" alt="淚光點點，嬌喘微微。">
      <div class="carousel-caption">
        淚光點點，嬌喘微微。
      </div>
    </div>
     <div class="item">
      <img src="img/3.jpg" alt="閒靜似嬌花照水，行動如弱柳扶風。">
      <div class="carousel-caption">
        閒靜似嬌花照水，行動如弱柳扶風。
      </div>
    </div>
     <div class="item">
      <img src="img/4.jpg" alt="心較比干多一竅，病如西子勝三分。">
      <div class="carousel-caption">
        心較比干多一竅，病如西子勝三分。
      </div>
    </div>

  </div>

   <!-- 輪播（Carousel）導航(控制左右移動) -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>

    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>

  </body>
</html>

是不是很簡單沒呢？？？，自己動手試試吧！！！

圖片無縫滾動BootStrap 輕鬆實現

圖片無縫滾動，不需要繁瑣的javascript程式碼，只需引用BootStrap 中的javascript外掛（Carousel)即可輕鬆實現。來看看吧：現附上演示地址：原始碼： <

jquery實現圖片無縫滾動，蒙版遮蔽效果

1、無縫連線：通過對li設定屬性float：left；消除標籤之間的間隔 2、通過對ul整體進行偏移設定，使圖片整體滾動， 3、設定圖片切換時機， 4、蒙版遮罩移入時機的選擇程式碼片. <!DOCTYPE html> <html> <head>

javascript實現圖片無縫滾動左右

一個能“動”的網站瀏覽起來看著就美觀大氣。今天我就實現四張圖片的無縫滾動，滑鼠進入滾動停止，點選圖片顯示提示資訊。工具/原料電腦一臺方法/步驟設定圖片的樣式： img { height:

js實現圖片無縫滾動特效

首先，無縫滾動的第一個重點就是——動。關於怎麼讓頁面的元素節點動起來，這就得學明白關於JavaSc

JS實現圖片無縫滾動效果

首先，藉助一張草圖來簡單說明一下往左移動的做法（往右相同）。如上圖所示，圖片的無縫滾動原理其實是把滾動的圖片複製成兩份並聯排列，當滾動完一次後就把圖片扯回到起點，重新滾動。這裡的往左運動把圖片扯回起點的臨界點是offsetLeft的絕對值大於offset

Javascript基礎——利用定時器實現的圖片無縫滾動(offsetLeft)

1、無縫滾動原理：（1）讓div動起來，讓ul一直向左/向右移動；（2）即利用定時器讓物體從左到右或從右到左進行滾動。採用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';（由左向右）注意：offsetL

jquery例項-多張圖片無縫滾動實現

演示效果： html頁面程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多張圖片無縫滾動實現</

bootstrap響應式相容PC和移動端圖片無縫滾動效果demo

效果如圖所示： js程式碼部分： /** * Created by Administrator on 2017/9/15. */ (function(){ var firstD

【常見】移動端實例——圖片無縫滾動

+= get math view ack sta chan ole 寬度 <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name

圖片無縫滾動程式碼

想必大家都注意到<marquee>的不迴圈滾動，所以出現了很多替代指令碼，或iframe或JS輸出<marquee>，不管怎麼做，都略顯麻煩。下面說一下這個相對簡單的實現思路：一個設定寬度並且隱藏超出它寬度的內容的容器demo，裡面放demo1和 de

（原生JS）圖片無縫滾動、圖片轉化、輪播圖、摺疊效果

1.圖片無縫滾動（原生JS）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無縫滾動</title&g

iOS開發之多圖片無縫滾動元件封裝與使用

正兒八經的圖片滾動的Demo我這兒還真沒有，今天呢就封裝一個可以在專案中直接使用的圖片輪播。沒看過其他iOS圖片無限輪播的程式碼，也不瞭解他們的原理，我今天封裝這個圖片無限輪播是借鑑Web前端中的做法，因為之前寫Web前端的時候，實現幻燈片就是這麼做的，今天就在iPhon

bootstrap table 實現固定懸浮table 表頭並可以水平滾動

app 實現 question get net width class pan eight 在開發項目中，需要將表格頭部固定，而且表格大多數情況下是會水平滾動的。項目的css框架是bootstrap 3，故也可以叫做bootstrap table。需要實現的是：表格頭部

CSS3實現無限循環的無縫滾動

css有時候在頁面的某個模塊中，需要無限循環的滾動一些消息。那麽如果我們用js實現無縫銜接滾動的思路是什麽呢（比如我們這個模塊是向上滾動的）？克隆A一份完全一樣的數據B放在原數據A的後面；使用setInterval向上滾動A的父級容器；當向上滾動的距離L正好的A的高度時(L==A.height())，L=0，

jquery 圖片自動無縫滾動

javascrip oat mar image charset ext 函數 oct meta <!DOCTYPE html><html><head> <meta charset="utf-8"> <m

圖片的無縫滾動效果

-- adding margin image left offset mage lang cti 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

Android ViewPager實現多個圖片水平滾動

oncreate iss block 如果 del ner ide extends 大小 1.示意圖 2.實現分析 (1).xml配置 <!-- 配置container和pager的clipChildre

JS 實現無縫滾動動畫原理（初學者入）

padding absolute hidden 高度 pos sof add align meta 　　這段時間在教培訓班的學生使用原生javascript實現無縫滾動的動畫案例，做了這個原理演示的動畫，分享給自學JS的朋友！博主希望對你們有幫助！在講解之前先看一下de

js實現無縫滾動

tab ntb asc list chrome webkit form ack target 代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

網站開發，推薦使用SuperSlide 插件-Tab標簽切換，圖片滾動，無縫滾動，焦點圖

更新 www 展示部分 rdquo 標簽網上幻燈片 dex SuperSlide 致力於解決網站大部分特效展示問題，使網站代碼規範整潔，方便維護更新。網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動

圖片無縫滾動BootStrap 輕鬆實現

相關推薦