手機端實現(xiàn)Bootstrap簡單圖片輪播效果
個人電腦里存了不少適合手機欣賞的圖片，但是放手機里看是件很占據(jù)資源的事。鑒于家里有一臺電腦經(jīng)常開著，正好用來做家庭局域網(wǎng)共享，于是筆者就設(shè)想通過一種比較簡單環(huán)保的思路。通過手機訪問電腦內(nèi)的圖片。
首先是本地站點搭建：win+R輸入mmc打開控制臺，文件-添加/刪除管理單元，Internet信息服務(wù)。添加確定，右側(cè)基本信息，新建網(wǎng)站-把路徑改了。設(shè)定一個端口號，手機瀏覽器就可以輸入 電腦局域網(wǎng)ip:端口號 就可以連上去了。
接下來問題來了，一個個點擊查看然后關(guān)閉圖片是一件更不環(huán)保的事。何不做一個網(wǎng)頁訪問呢？最簡單的就是選項卡-輪播圖的模式。鑒于bootstrap的易適配性，就直接用它吧。
一. 初始化設(shè)置：
按鈕組（ul-li-button）（太長，所有overflow hidden，需要滑動顯示），按鈕組是根據(jù)實際情況用DOM生成的，進入頁面默認顯示第一頁紅色高亮顯示。
跳轉(zhuǎn)按鈕：一文本輸入框，一個button風格的input
美圖展示區(qū)
二. 頁面主要實現(xiàn)三個功能，每個功能要實現(xiàn)三類相似的效果：
1. 手指點擊頁面可以自動切換
左右區(qū)域被點擊
思路，做兩個透明的絕對定位div一左一右，覆蓋img層上方。點擊時可以觸發(fā)事件：
（1）按鈕組顏色變化
（2）按鈕組滑動
（3）圖片切換
這里有個誰控制誰的問題，需要選取點擊一瞬間的紅色按鈕，然后變變藍，下一個（上一個）變紅。
（ul-li-button）體系中，按鈕組滑動距離應該是當前的基礎(chǔ)上前進或后退一個li的寬度單位。但是自適應的按鈕個位數(shù)和十位數(shù)寬度不同。需要分類討論之。
圖片根據(jù)變化后紅色按鈕內(nèi)的序號改變顯示的圖片。
所以是序列按鈕控制所有功能
2.點擊按鈕頁面切換
事件——序列按鈕被點擊
（1）點擊按鈕顏色變化——被點擊的按鈕變紅，其它變藍——不難
（2）按鈕組滑動目標位置——用的是當前按鈕的left值，加上少算ul-lipadding的15——就算出了當前button相對于ul的偏移。然后，把此偏移作為ul相對于顯示區(qū)的偏移值。（如果愿意，可以加上一個值，讓按鈕看起來居中）
（3）圖片切換，根據(jù)變化后紅色按鈕內(nèi)的序號改變顯示的圖片。
此過程1依然是序列按鈕控制所有功能。
3.輸入跳轉(zhuǎn)
事件——跳轉(zhuǎn)按鈕被點擊
（1）按鈕變色，根據(jù)輸入框內(nèi)的value值，用原生js把該含有該序號的按鈕選出來。變紅
（2）按鈕組滑動——跟前面一樣
（2）圖片切換，跟前面一樣。
此過程是輸入框控制頁面的所有功能。
根據(jù)這個思想，大致的功能就實現(xiàn)了。
三 .有幾個原則：
（1）動畫控制：手持設(shè)備的特性允許用戶以很快的手速點擊屏幕，頻繁地觸發(fā)事件導致按鈕不能停止?？梢杂门袛鄤赢嫼瘮?shù)來阻止運行。但是這樣做讓頁面生硬?？梢钥紤]用淡出——改變圖片路徑（延遲執(zhí)行）——淡入的方式，及解決了快手速用戶問題，也能在一定程度上提升柔和感，
（2）極限控制，當?shù)谝豁摵妥詈笠豁摃r，應阻止用戶再操作。
（3）圖片為了網(wǎng)頁應該做一定的修改，本例采用的圖片命名為xxx (1) ，xxx (2)。。。。的方式，因為有一個流水號所以DOM操作起來很方便。
四. 進一步應用
寫了那么多代碼，只用在一個套圖頁面上面，就太不環(huán)保了。所以把它們封裝為函數(shù)。傳入兩個參數(shù)：url 和 imgNum分別代表圖片路徑和套圖數(shù)量。
url是一個字符串，必須滿足下面要求：
圖片文件名必須夾雜 “（流水號）”，對文件夾名等無要求，比如 “文靜/wenjing().jjpg” 系列流水號由js生成。所以不用寫。
實現(xiàn)手段是slice()方法。
五.問題
首次加載時動畫顯示滯后，是因為需要時間下載所致，可以通過適當延長動畫時間。在家庭共享環(huán)境下，可以忽略這個問題。
可能存在因為bootstrap特性，所以有若干自定樣式的表現(xiàn)不符合設(shè)計的規(guī)范。
效果圖：（適配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">
<!--支持國產(chǎn)瀏覽器的高速渲染-->
<meta name="renderer" content="Webkit">
<!--在此進行SEO設(shè)置：作者、關(guān)鍵詞、描述-->
<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>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è)置
//手指點擊事件
$('#box div').click(function(){
if($(this).attr('id')=='next'){//下一個
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'){//上一個
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;
};
//個位數(shù)按鈕和10位數(shù)按鈕寬度不同。所以設(shè)置兩個
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);
});
//選項按鈕點擊
$('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)按鈕點擊
$('.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);
})//在其它頁面也引入了Ugirl函數(shù)后，就可以直接調(diào)用直接調(diào)用
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js處理表格對table進行修飾的一些小技巧,需要的朋友可以參考下2014-05-05
下面小編就為大家?guī)硪黄狫S平滑無縫滾動效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
各瀏覽器對link標簽onload/onreadystatechange事件支持的差異分析
各瀏覽器對link標簽onload/onreadystatechange事件支持的差異分析，需要的朋友可以參考下。2011-04-04
《JavaScript高級程序設(shè)計》閱讀筆記（三） ECMAScript中的引用類型
ECMAScript中的引用類型，主要包括Object類、Boolean類、Number類、String類、instanceof運算符2012-02-02
這篇文章主要介紹了js在HTML的三種引用方式詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
javascript實現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示代碼
關(guān)鍵詞高亮想必大家對它都不陌生吧，應用也比較廣泛的，下面為大家介紹下通過javascript是如何實現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示2014-04-04
這篇文章主要為大家詳細介紹了js+html5實現(xiàn)手機九宮格密碼解鎖功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
2020淘寶618理想生活列車自動領(lǐng)喵幣js腳本的代碼
這篇文章主要介紹了2020淘寶618理想生活列車自動領(lǐng)喵幣腳本,需要先安裝 auto.js腳本，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了基于JavaScript實現(xiàn)單例模式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了JavaScript 拖拽實例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09