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

手机端实现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

css

boBbugypJdMZdy{

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

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 = $('

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 = $('

$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函数后，就可以直接调用直接调用

精彩专题分享：jQuery图片轮播 javaScript图片轮播

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。