手機端實現Bootstrap圖片輪播的效果-js教程-PHP中文網

首頁

web前端

js教程

手機端實現Bootstrap圖片輪播的效果

不言

Jun 25, 2018 am 11:50 AM

這篇文章主要為大家詳細介紹了基於Bootstrap的簡單輪播圖的手機實現,具有一定的參考價值，感興趣的小伙伴們可以參考一下

個人電腦裡存了不少適合手機欣賞的圖片，但是放手機裡看是件很佔據資源的事。鑑於家裡有一台電腦經常開著，正好用來做家庭區域網路共享，於是筆者就設想透過一種比較簡單環保的想法。透過手機存取電腦內的圖片。

首先是本機網站建置：win R輸入mmc開啟控制台，檔案-新增/刪除管理單元，Internet資訊服務。添加確定，右側基本訊息，新網站-把路徑改了。設定一個連接埠號，手機瀏覽器就可以輸入電腦區域網路ip:連接埠號碼就可以連上去了。

接下來問題來了，一個個點擊查看然後關閉圖片是一件更不環保的事。 何不做一個網頁訪問呢？ 最簡單的就是選項卡-輪播圖的模式。鑑於bootstrap的易適配性，就直接用它吧。

一.初始化設定：

按鈕組（ul-li-button）（太長，所有overflow hidden，需要滑動顯示），按鈕組是根據實際情況用DOM產生的，進入頁面預設顯示第一頁紅色高亮顯示。
跳轉按鈕：一文字輸入框，一個button風格的input
美圖展示區

二. 頁面主要實現三個功能，每個功能要實現三類相似的效果：

1. 手指點擊頁面可以自動切換

左右區域被點擊
思路，做兩個透明的絕對定位p一左一右，覆蓋img層上方。點擊時可以觸發事件：
（1）按鈕組顏色變化
（2）按鈕組滑動
（3）圖片切換
這裡有個誰控制誰的問題，需要選取點擊一瞬間的紅色按鈕，然後變藍，下一個（上一個）變紅。
（ul-li-button）體系中，按鈕組滑動距離應該是當前的基礎上前進或後退一個li的寬度單位。但是自適應的按鈕個位數和十位數寬度不同。需要分類討論之。
圖片會根據變更後紅色按鈕內的序號改變顯示的圖片。
所以是序列按鈕控制所有功能

2.點擊按鈕頁面切換

按鈕被點擊
（1）點擊按鈕顏色變化——被點擊的按鈕變紅，其它變藍——不難
（2）按鈕組滑動目標位置——用的是當前按鈕的left值，加上少算ul-lipadding的15——就算出了當前button相對於ul的偏移。然後，把此偏移當作ul相對於顯示區的偏移值。（如果願意，可以加上一個值，讓按鈕看起來居中）
（3）圖片切換，根據變更後紅色按鈕內的序號改變顯示的圖片。
此過程1依然是序列按鈕控制所有功能。

3.輸入跳轉
事件－跳轉按鈕被點選
（1）按鈕變色，依照輸入框內的value值，用原生js把該含有該序號的按鈕選出來。變紅
（2）按鈕組滑動－跟前面一樣
（2）圖片切換，跟前面一樣。
此程序是輸入框控制頁面的所有功能。

根據這個思想，大致的功能就實現了。

三.有幾個原則：
（1）動畫控制：手持裝置的特性允許使用者以很快的手速點擊螢幕，頻繁地觸發事件導致按鈕不能停止。可以用判斷動畫函數來阻止運行。但這樣做讓頁面生硬。可以考慮用淡出－改變圖片路徑（延遲執行）－淡入的方式，及解決了快手速使用者問題，也能在某種程度上提升柔和感，
（2）極限控制，當第一頁和最後一頁時，應阻止使用者再操作。
（3）圖片為了網頁應該做一定的修改，本例採用的圖片命名為xxx (1) ，xxx (2)。。。。的方式，因為有一個流水號所以DOM操作起來很方便。

四.進一步應用

寫了那麼多程式碼，只用在一個套圖頁面上面，就太不環保了。所以把它們封裝為函數。傳入兩個參數：url 和 imgNum分別代表圖片路徑和套圖數量。
url是一個字串，必須滿足下面要求：
圖片檔案名稱必須夾雜“（流水號）”，對文件夾名等無要求，例如“文靜/wenjing().jjpg” 系列流水號由js產生。所以不用寫。
實作手段是slice()方法。

五.問題

動畫顯示首次載入時滯後，是因為需要時間下載所致，可以透過適當延長動畫時間。在家庭共享環境下，可以忽略這個問題。
可能存在因為bootstrap特性，所以有若干自定樣式的表現不符合設計的規範。

效果圖：（適配ip6）

demo位址：（建議手機觀看）http://djtao.top/ugirl/

代碼清單html

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
 <!--页面编码 -->
 <meta charset="UTF-8">
 <!--低版本浏览器模拟渲染-->
  
 <meta name="viewport" content="width=device-width, initialscale=
1, maximumscale=1, user-scalable=no">
 <meta name="viewport" content="width=deviece-width,initial-scale=1">
  
 <!--支持国产浏览器的高速渲染-->
 <meta name="renderer" content="Webkit">
 <!--在此进行SEO设置：作者、关键词、描述-->
 <meta name="author" content="djtao">
 <meta name="keywords" content="djtao">
 <meta name="description" content="djtao">
  
 <title>Ugirl</title>
  
 <!--bootstrap-->
  
 <!--以下两个js插件用于在IE8及以下支持H5元素查询的，如不用可移除 -->
 <!--[if lt IE 9]>
  <script src="scripts/html5.min.js"></script>
  <script src="scripts/respond.min.js"></script>
 <![endif]-->
  
 <!--bootstrap样式文件 -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
 <!--自定义样式文件 -->
 <link rel="stylesheet" href="styles/css.css">
  
 <!--基于jQuery的脚本文件 -->
 <script src="scripts/jquery.min.js"></script>
 <!-- bootstrap的jq插件 -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <!--自定义脚本文件 -->
 <script src="scripts/js.js"></script>
  
  
  
 </head>
 <body class="container">
 <header>
  <h1 id="Ugirl-nbsp-small-专业的秘密-small">Ugirl <small>专业的秘密</small></h1>
 </header>
 <p id="main" class="row">
  <p id="btn-group" class="col-xs-6">
  <ul id="list" class="list-inline"></ul>
  </p>
  <p class="col-xs-6">
   <form class="form-horizontal">
   <p class="form-group has-success">
    <p class="col-xs-6"><input class="form-control" id="num" style="width:100%" col="2" type="text"></p>
    <p class="col-xs-2"><input type="button" value="jump" class="btn btn-default">
   </p>
   </form>
  </p>
  </p>
 </p>
 <p class="row">
  <p id="box" class="col-xs-12">
  <p id="last"></p>
  <p id="next"></p>
  <img  class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="img/wenjing/wenjing (1).jpg"    alt="手機端實現Bootstrap圖片輪播的效果" >
  </p> 
 </p>
 
  
 </body>
</html>

css

body{
 background: #f2f2f2;
}
#box{
 position: relative;
}
#next{
 width:50%;height:500px;
 position: absolute;
 left:50%;
}
#last{
 width:50%;height:500px;
 position: absolute;
 
}
#btn-group{
 height: 40px;
 overflow: hidden;
}
#list{
 list-style: none;
 position: absolute;
}
#list>li{
 list-style: none;
 float: left;
 position: relative;
}
#main{
 margin-top: 20px;
}

#########javascript########

function Ugirl(url,imgNum){
 
 var aBtn=document.getElementsByTagName(&#39;button&#39;);
 $(&#39;#list&#39;).css(&#39;width&#39;,(imgNum*(52))+&#39;px&#39;);
 var str=url;
 var index=0;
 for(i=0;i<str.length;i++){
 if(str.slice(i-1,i)==&#39;(&#39;){
  index=i;
 }
 }
 var a=str.slice(0,index);
 var b=str.slice(index);
 //分割url字符串
 for(j=1;j<=imgNum;j++){
 var $btn = $(&#39;<li><button class="btn btn-primary">&#39;+j+&#39;</button></li>&#39;);
 $btn.appendTo($(&#39;#list&#39;));
 }
 aBtn[0].className=&#39;btn btn-danger&#39;;
 //按钮初始化设置
 //手指点击事件
 $(&#39;#box p&#39;).click(function(){
  
 if($(this).attr(&#39;id&#39;)==&#39;next&#39;){//下一个
  if($(&#39;.btn-danger&#39;) .html()==imgNum){
  alert(&#39;到底了哦&#39;);
  return false;
  }
  liWidth=44;
  liWidth2=52;
  
  $(&#39;.btn-danger&#39;).removeClass().addClass(&#39;btn btn-primary&#39;)
  .parent().next().children().removeClass().addClass(&#39;btn btn-danger&#39;);
 
 }else if($(this).attr(&#39;id&#39;)==&#39;last&#39;){//上一个
  if($(&#39;.btn-danger&#39;) .html()==1){
  alert(&#39;到顶了哦&#39;);
  return false;
  }else{
  $(&#39;.btn-danger&#39;).removeClass().addClass(&#39;btn btn-primary&#39;)
   .parent().prev().children().removeClass().addClass(&#39;btn btn-danger&#39;);
  liWidth=-44;
  liWidth2=-52;
  } 
 }else{
  return false;
 };
 //个位数按钮和10位数按钮宽度不同。所以设置两个
 if($(&#39;.btn-danger&#39;) .html()<=10){
  
  $(&#39;#list&#39;).animate({left:&#39;-=&#39;+liWidth+&#39;px&#39;},400);
  
 }else if($(&#39;.btn-danger&#39;) .html()>10){
  
  $(&#39;#list&#39;).animate({left:&#39;-=&#39;+liWidth2+&#39;px&#39;},400);
 }
 //大图切换
 $(&#39;img&#39;).fadeOut(200);
 setTimeout(function(){
  $(&#39;img&#39;).attr(&#39;src&#39;,a+$(&#39;.btn-danger&#39;) .html()+b);
 },220)
 $(&#39;img&#39;).fadeIn(300);
 });
 //选项按钮点击
 $(&#39;button&#39;).click(function(){ 
 $(&#39;button&#39;).attr(&#39;class&#39;,&#39;btn btn-primary&#39;);
 $(this).attr(&#39;class&#39;,&#39;btn btn-danger&#39;);
 var moveLength=-$(this).parent().position().left+15;
 $(&#39;#list&#39;).animate({left:moveLength+&#39;px&#39;},400);
 $(&#39;img&#39;).attr(&#39;src&#39;,a+$(&#39;.btn-danger&#39;) .html()+b); 
  
 });
 //跳转按钮点击
 $(&#39;.btn-default&#39;).click(function(){
 var s=$(&#39;#num&#39;).val();
 if(s<1||s>imgNum){
  return false;
  alert(&#39;没有那么多哦&#39;)
 }//极限设置
 var pageNum=$(&#39;.btn-danger&#39;) .html();
 $(&#39;img&#39;).attr(&#39;src&#39;,a+s+b);
 $(&#39;#list&#39;).children().children().removeClass().addClass(&#39;btn btn-primary&#39;);
 $(aBtn[s-1]).removeClass().addClass(&#39;btn btn-danger&#39;);
 var moveLength=-$(aBtn[s-1]).parent().position().left+15;
 $(&#39;#list&#39;).animate({left:moveLength+&#39;px&#39;},400);
 })
}
$(function(){
 Ugirl(&#39;img/wenjing/wenjing ().jpg&#39;,65);
})//在其它页面也引入了Ugirl函数后，就可以直接调用直接调用

###### ####以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########bootstrap時間控制項daterangepicker的使用方法###############關於Bootstrap中form和navbar使用方法的解析###########################

以上是手機端實現Bootstrap圖片輪播的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。