bootstrap輪播圖
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用carousel</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">javascript
<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>css
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin:10px;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="javascript:void(0)">
<img src="http://fun.datang.net/uploadpic/276e0c7bb66b46318c3bb9c59cad9411.jpg" style="width:300px;height:300px;" alt="圖片一"/></a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="javascript:void(0)">驢子跳</a>
</h4>
</div>
</div>
<div class="item">
<a href="javascript:void(0)">
<img src="http://img5.imgtn.bdimg.com/it/u=372265704,58471841&fm=21&gp=0.jpg" style="width:300px;height:300px;" alt="圖片二"/>
</a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="javascript:void(0)">MarkDown</a>
</h4>
</div>
</div>
<div class="item">
<a href="javascript:void(0)">
<img src="http://img1.imgtn.bdimg.com/it/u=3318255286,2969027749&fm=23&gp=0.jpg" style="width:300px;height:300px;" alt="圖片三"/>
</a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="javascript:void(0)">BootStrap</a>
</h4>
</div>
</div>
<!-- 控制按鈕 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>html
解決展現時圖片變形的問題
運行上節的代碼咱們發現插件中的圖片發生了變形，分析其緣由爲：輪換插件中的圖片使用的文章中的第一張圖片，圖片的大小不一，而輪播插件的大小基本是固定的，因此展現的時候圖片出現了變形。下面看看怎麼解決這個問題：java
1.引入Jqthumb.jsjquery
在BootStrap中咱們找不到解決辦法，因此咱們須要藉助其它工具。Jqthumb插件是專門用來爲圖片生成縮略圖的，它能夠從圖片中的任何座標點開始取指定大小的圖片區域做爲圖片的縮略圖。你能夠點擊 https://github.com/pakcheong/jqthumb 來下載它，並將其應用到項目中(假設在當前項目中，jqthumb.js放置在scripts文件夾中):git
- <script type="text/javascript" src="/scripts/jqthumb.js"></script>
2.在圖片加載(onload)的時候調用DrawImage()函數來生成縮略圖github
DrawImage()函數正是基於jqthumb.js庫的，注意該函數必定要寫在輪換插件前，由於咱們必須在圖片加載前生成縮略圖。DrawImage()函數代碼以下：bootstrap
- <!--導入插件-->
- <script type="text/javascript" src="/scripts/jqthumb.js"></script>
- <script>
- function DrawImage(hotimg)
- {
- $(hotimg).jqthumb({
- classname : 'jqthumb',
- width : '100%',//寬度
- height : '300px',//高度
- position : { y: '50%', x: '50%'},//從圖片的中間開始產生縮略圖
- zoom : '1',//縮放比例
- method : 'auto',//提交方法，用於不一樣的瀏覽器環境，默認爲‘auto’
- });
- }
- </script>
在上述代碼中，咱們使用了jqthumb，而且傳入了相關初始化參數。調用了該函數後，在圖片加載的時候，就會按照上述參數產生圖片的縮略圖，從而解決圖片變形問題。因爲縮略圖是從原始圖片的正中間開始往兩邊取得，因此該縮略圖包含了圖片的主要內容。（具體使用見右邊詳細代碼）瀏覽器
- 1. Bootstrap圖片輪播
- 2. Bootstrap之輪播圖
- 3. BootStrap輪播圖 (自動輪播)
- 4. 小議Bootstrap輪播圖
- 5. Bootstrap插件-carousel(輪播圖)
- 6. bootstrap實現輪播圖
- 7. Bootstrap 輪播圖設置
- 8. bootstrap 圖片輪播效果
- 9. Bootstrap 輪播圖技巧
- 10. Bootstrap 圖片自動輪播
- 更多相關文章...
- • R 繪圖 - 餅圖 - R 語言教程
- • R 繪圖 - 散點圖 - R 語言教程
- • Flink 數據傳輸及反壓詳解
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Bootstrap圖片輪播
- 2. Bootstrap之輪播圖
- 3. BootStrap輪播圖 (自動輪播)
- 4. 小議Bootstrap輪播圖
- 5. Bootstrap插件-carousel(輪播圖)
- 6. bootstrap實現輪播圖
- 7. Bootstrap 輪播圖設置
- 8. bootstrap 圖片輪播效果
- 9. Bootstrap 輪播圖技巧
- 10. Bootstrap 圖片自動輪播