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


Posted in Javascript onOctober 13, 2016

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

首先是本地站点搭建: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)

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
React更新渲染原理深入分析
Dec 24 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 #Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 #Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 #Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 #Javascript
微信js-sdk界面操作接口用法示例
Oct 12 #Javascript
微信小程序 location API接口详解及实例代码
Oct 12 #Javascript
webpack+vue.js实现组件化详解
Oct 12 #Javascript
You might like
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
Jquery把获取到的input值转换成json
2017/05/15 jQuery
JavaScript实现修改伪类样式
2017/11/27 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
Angular2中监听数据更新的方法
2018/08/31 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python使用append合并两个数组的方法
2015/04/28 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
户籍证明的格式
2014/01/13 职场文书
公证书格式
2015/01/23 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
统计员岗位职责范本
2015/04/14 职场文书
文化大革命观后感
2015/06/17 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python