手机端实现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 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JQuery触发事件例如click
Sep 11 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
node.js入门学习之url模块
Feb 25 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
vue router使用query和params传参的使用和区别
Nov 13 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
react项目从新建到部署的实现示例
Feb 19 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微信开发之批量生成带参数的二维码
2016/06/26 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
python实现朴素贝叶斯分类器
2018/03/28 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
什么是数组名
2012/05/10 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
毕业生的自我鉴定
2013/10/29 职场文书
客服服务心得体会
2013/12/30 职场文书
申论倡议书范文
2014/05/13 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
2014年护理部工作总结
2014/11/14 职场文书
优秀团员自我评价
2015/03/10 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android