手机端实现Bootstrap简单图片轮播效果

个人电脑里存了不少适合手机欣赏的图片，但是放手机里看是件很占据资源的事。鉴于家里有一台电脑经常开着，正好用来做家庭局域网共享，于是笔者就设想通过一种比较简单环保的思路。通过手机访问电脑内的图片。
首先是本地站点搭建：win+R输入mmc打开控制台，文件-添加/删除管理单元，Internet信息服务。添加确定，右侧基本信息，新建网站-把路径改了。设定一个端口号，手机浏览器就可以输入电脑局域网ip:端口号就可以连上去了。
接下来问题来了，一个个点击查看然后关闭图片是一件更不环保的事。何不做一个网页访问呢？最简单的就是选项卡-轮播图的模式。鉴于bootstrap的易适配性，就直接用它吧。

一. 初始化设置：

按钮组（ul-li-button）（太长，所有overflow hidden，需要滑动显示），按钮组是根据实际情况用DOM生成的，进入页面默认显示第一页红色高亮显示。
跳转按钮：一文本输入框，一个button风格的input
美图展示区

二. 页面主要实现三个功能，每个功能要实现三类相似的效果：

1. 手指点击页面可以自动切换

左右区域被点击
思路，做两个透明的绝对定位div一左一右，覆盖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>Ugirl <small>专业的秘密</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"; //按钮初始化设置 //手指点击事件 $（"#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;};//个位数按钮和10位数按钮宽度不同。所以设置两个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）; }）; //跳转按钮点击 $（".btn-default"）.click（function（）{var s=$（"#num"）.val（）;if（s<1||s>imgNum）{ return false; alert（"没有那么多哦"）}//极限设置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函数后，就可以直接调用直接调用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。