手機(jī)端實(shí)現(xiàn)Bootstrap簡(jiǎn)單圖片輪播效果

更新時(shí)間：2016年10月13日 08:38:10 作者：葡萄美酒夜光杯

這篇文章主要為大家詳細(xì)介紹了基于Bootstrap的簡(jiǎn)單輪播圖的手機(jī)實(shí)現(xiàn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

個(gè)人電腦里存了不少適合手機(jī)欣賞的圖片，但是放手機(jī)里看是件很占據(jù)資源的事。鑒于家里有一臺(tái)電腦經(jīng)常開著，正好用來做家庭局域網(wǎng)共享，于是筆者就設(shè)想通過一種比較簡(jiǎn)單環(huán)保的思路。通過手機(jī)訪問電腦內(nèi)的圖片。

首先是本地站點(diǎn)搭建：win+R輸入mmc打開控制臺(tái)，文件-添加/刪除管理單元，Internet信息服務(wù)。添加確定，右側(cè)基本信息，新建網(wǎng)站-把路徑改了。設(shè)定一個(gè)端口號(hào)，手機(jī)瀏覽器就可以輸入電腦局域網(wǎng)ip:端口號(hào) 就可以連上去了。

接下來問題來了，一個(gè)個(gè)點(diǎn)擊查看然后關(guān)閉圖片是一件更不環(huán)保的事。何不做一個(gè)網(wǎng)頁(yè)訪問呢？最簡(jiǎn)單的就是選項(xiàng)卡-輪播圖的模式。鑒于bootstrap的易適配性，就直接用它吧。

一. 初始化設(shè)置：

按鈕組（ul-li-button）（太長(zhǎng)，所有overflow hidden，需要滑動(dòng)顯示），按鈕組是根據(jù)實(shí)際情況用DOM生成的，進(jìn)入頁(yè)面默認(rèn)顯示第一頁(yè)紅色高亮顯示。
跳轉(zhuǎn)按鈕：一文本輸入框，一個(gè)button風(fēng)格的input
美圖展示區(qū)

二. 頁(yè)面主要實(shí)現(xiàn)三個(gè)功能，每個(gè)功能要實(shí)現(xiàn)三類相似的效果：

1. 手指點(diǎn)擊頁(yè)面可以自動(dòng)切換

左右區(qū)域被點(diǎn)擊
思路，做兩個(gè)透明的絕對(duì)定位div一左一右，覆蓋img層上方。點(diǎn)擊時(shí)可以觸發(fā)事件：
（1）按鈕組顏色變化
（2）按鈕組滑動(dòng)
（3）圖片切換
這里有個(gè)誰(shuí)控制誰(shuí)的問題，需要選取點(diǎn)擊一瞬間的紅色按鈕，然后變變藍(lán)，下一個(gè)（上一個(gè)）變紅。
（ul-li-button）體系中，按鈕組滑動(dòng)距離應(yīng)該是當(dāng)前的基礎(chǔ)上前進(jìn)或后退一個(gè)li的寬度單位。但是自適應(yīng)的按鈕個(gè)位數(shù)和十位數(shù)寬度不同。需要分類討論之。
圖片根據(jù)變化后紅色按鈕內(nèi)的序號(hào)改變顯示的圖片。
所以是序列按鈕控制所有功能

2.點(diǎn)擊按鈕頁(yè)面切換

事件——序列按鈕被點(diǎn)擊
（1）點(diǎn)擊按鈕顏色變化——被點(diǎn)擊的按鈕變紅，其它變藍(lán)——不難
（2）按鈕組滑動(dòng)目標(biāo)位置——用的是當(dāng)前按鈕的left值，加上少算ul-lipadding的15——就算出了當(dāng)前button相對(duì)于ul的偏移。然后，把此偏移作為ul相對(duì)于顯示區(qū)的偏移值。（如果愿意，可以加上一個(gè)值，讓按鈕看起來居中）
（3）圖片切換，根據(jù)變化后紅色按鈕內(nèi)的序號(hào)改變顯示的圖片。
此過程1依然是序列按鈕控制所有功能。

3.輸入跳轉(zhuǎn)
事件——跳轉(zhuǎn)按鈕被點(diǎn)擊
（1）按鈕變色，根據(jù)輸入框內(nèi)的value值，用原生js把該含有該序號(hào)的按鈕選出來。變紅
（2）按鈕組滑動(dòng)——跟前面一樣
（2）圖片切換，跟前面一樣。
此過程是輸入框控制頁(yè)面的所有功能。

根據(jù)這個(gè)思想，大致的功能就實(shí)現(xiàn)了。

三 .有幾個(gè)原則：
（1）動(dòng)畫控制：手持設(shè)備的特性允許用戶以很快的手速點(diǎn)擊屏幕，頻繁地觸發(fā)事件導(dǎo)致按鈕不能停止?？梢杂门袛鄤?dòng)畫函數(shù)來阻止運(yùn)行。但是這樣做讓頁(yè)面生硬?？梢钥紤]用淡出——改變圖片路徑（延遲執(zhí)行）——淡入的方式，及解決了快手速用戶問題，也能在一定程度上提升柔和感，
（2）極限控制，當(dāng)?shù)谝豁?yè)和最后一頁(yè)時(shí)，應(yīng)阻止用戶再操作。
（3）圖片為了網(wǎng)頁(yè)應(yīng)該做一定的修改，本例采用的圖片命名為xxx (1) ，xxx (2)。。。。的方式，因?yàn)橛幸粋€(gè)流水號(hào)所以DOM操作起來很方便。

四. 進(jìn)一步應(yīng)用

寫了那么多代碼，只用在一個(gè)套圖頁(yè)面上面，就太不環(huán)保了。所以把它們封裝為函數(shù)。傳入兩個(gè)參數(shù)：url 和 imgNum分別代表圖片路徑和套圖數(shù)量。
url是一個(gè)字符串，必須滿足下面要求：
圖片文件名必須夾雜 “（流水號(hào)）”，對(duì)文件夾名等無要求，比如 “文靜/wenjing().jjpg” 系列流水號(hào)由js生成。所以不用寫。
實(shí)現(xiàn)手段是slice()方法。

五.問題

首次加載時(shí)動(dòng)畫顯示滯后，是因?yàn)樾枰獣r(shí)間下載所致，可以通過適當(dāng)延長(zhǎng)動(dòng)畫時(shí)間。在家庭共享環(huán)境下，可以忽略這個(gè)問題。
可能存在因?yàn)閎ootstrap特性，所以有若干自定樣式的表現(xiàn)不符合設(shè)計(jì)的規(guī)范。

效果圖：（適配ip6）

demo地址：（建議手機(jī)觀看）http://djtao.top/ugirl/

代碼清單html

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
 <!--頁(yè)面編碼 -->
 <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">
  
 <!--支持國(guó)產(chǎn)瀏覽器的高速渲染-->
 <meta name="renderer" content="Webkit">
 <!--在此進(jìn)行SEO設(shè)置：作者、關(guān)鍵詞、描述-->
 <meta name="author" content="djtao">
 <meta name="keywords" content="djtao">
 <meta name="description" content="djtao">
  
 <title>Ugirl</title>
  
 <!--bootstrap-->
  
 <!--以下兩個(gè)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>Ugirl <small>專業(yè)的秘密</small></h1>
 </header>
 <div id="main" class="row">
  <div id="btn-group" class="col-xs-6">
  <ul id="list" class="list-inline"></ul>
  </div>
  <div class="col-xs-6">
   <form class="form-horizontal">
   <div class="form-group has-success">
    <div class="col-xs-6"><input class="form-control" id="num" style="width:100%" col="2" type="text"></div>
    <div class="col-xs-2"><input type="button" value="jump" class="btn btn-default">
   </div>
   </form>
  </div>
  </div>
 </div>
 <div class="row">
  <div id="box" class="col-xs-12">
  <div id="last"></div>
  <div id="next"></div>
  <img class="img-responsive" src="img/wenjing/wenjing (1).jpg">
  </div> 
 </div>
 
  
 </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('button');
 $('#list').css('width',(imgNum*(52))+'px');
 var str=url;
 var index=0;
 for(i=0;i<str.length;i++){
 if(str.slice(i-1,i)=='('){
  index=i;
 }
 }
 var a=str.slice(0,index);
 var b=str.slice(index);
 //分割url字符串
 for(j=1;j<=imgNum;j++){
 var $btn = $('<li><button class="btn btn-primary">'+j+'</button></li>');
 $btn.appendTo($('#list'));
 }
 aBtn[0].className='btn btn-danger';
 //按鈕初始化設(shè)置
 //手指點(diǎn)擊事件
 $('#box div').click(function(){
  
 if($(this).attr('id')=='next'){//下一個(gè)
  if($('.btn-danger') .html()==imgNum){
  alert('到底了哦');
  return false;
  }
  liWidth=44;
  liWidth2=52;
  
  $('.btn-danger').removeClass().addClass('btn btn-primary')
  .parent().next().children().removeClass().addClass('btn btn-danger');
 
 }else if($(this).attr('id')=='last'){//上一個(gè)
  if($('.btn-danger') .html()==1){
  alert('到頂了哦');
  return false;
  }else{
  $('.btn-danger').removeClass().addClass('btn btn-primary')
   .parent().prev().children().removeClass().addClass('btn btn-danger');
  liWidth=-44;
  liWidth2=-52;
  } 
 }else{
  return false;
 };
 //個(gè)位數(shù)按鈕和10位數(shù)按鈕寬度不同。所以設(shè)置兩個(gè)
 if($('.btn-danger') .html()<=10){
  
  $('#list').animate({left:'-='+liWidth+'px'},400);
  
 }else if($('.btn-danger') .html()>10){
  
  $('#list').animate({left:'-='+liWidth2+'px'},400);
 }
 //大圖切換
 $('img').fadeOut(200);
 setTimeout(function(){
  $('img').attr('src',a+$('.btn-danger') .html()+b);
 },220)
 $('img').fadeIn(300);
 });
 //選項(xiàng)按鈕點(diǎn)擊
 $('button').click(function(){ 
 $('button').attr('class','btn btn-primary');
 $(this).attr('class','btn btn-danger');
 var moveLength=-$(this).parent().position().left+15;
 $('#list').animate({left:moveLength+'px'},400);
 $('img').attr('src',a+$('.btn-danger') .html()+b); 
  
 });
 //跳轉(zhuǎn)按鈕點(diǎn)擊
 $('.btn-default').click(function(){
 var s=$('#num').val();
 if(s<1||s>imgNum){
  return false;
  alert('沒有那么多哦')
 }//極限設(shè)置
 var pageNum=$('.btn-danger') .html();
 $('img').attr('src',a+s+b);
 $('#list').children().children().removeClass().addClass('btn btn-primary');
 $(aBtn[s-1]).removeClass().addClass('btn btn-danger');
 var moveLength=-$(aBtn[s-1]).parent().position().left+15;
 $('#list').animate({left:moveLength+'px'},400);
 })
}
$(function(){
 Ugirl('img/wenjing/wenjing ().jpg',65);
})//在其它頁(yè)面也引入了Ugirl函數(shù)后，就可以直接調(diào)用直接調(diào)用

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: