亲宝软件园·资讯

展开

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

葡萄美酒夜光杯 人气:0

个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事。鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路。通过手机访问电脑内的图片。

首先是本地站点搭建: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:/https://img.qb5200.com/download-x/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函数后,就可以直接调用直接调用

精彩专题分享:jQuery图片轮播 JavaScript图片轮播

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

加载全部内容

相关教程
猜你喜欢
用户评论