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

首先是本地站点搭建：win+R输入mmc打开控制台，文件-添加/删除管理单元，Internet信息服务。添加确定，右侧基本信息，新建网站-把路径改了。设定一个端口号，手机浏览器就可以输入  电脑局域网ip:端口号 就可以访问电脑了。

接下来问题来了，一个个点击查看然后关闭图片是一件更不环保的事。何不做一个网页访问呢？最简单的就是选项卡-轮播图的模式。鉴于bootstrap的易适配性，就直接用它吧。
 
一. 初始化设置：
按钮组（ul-li-button）（太长，所有overflow hidden，需要滑动显示），按钮组是根据实际情况用DOM生成的，进入页面默认显示第一页红色高亮显示。
（1）跳转按钮：一文本输入框，一个button风格的input
（2）美图展示区
 
二. 页面主要实现三个功能，每个功能要实现三类相似的效果：
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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函数后，就可以直接调用直接调用
 
 
 

（新手向）基于Bootstrap的简单轮播图的手机实现的更多相关文章

  1. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  2. JS---案例：简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  3. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  4. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  5. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  6. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  7. Bootstrap插件-carousel(轮播图)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  9. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

随机推荐

  1. 转 Linux日志文件系统及性能分析

    日志文件系统可以在系统发生断电或者其它系统故障时保证整体数据的完整性,Linux是目前支持日志文件系统最多的操作系统之一,本文重点研究了Linux常用的日志文件系统:EXT3.ReiserFS.XFS ...

  2. 【BZOJ 3165】【HEOI 2013】Segment

    往区间上覆盖一次函数,做法是用线段树维护标记永久化. 每次都忘了线段树要4倍空间,第一次交总是RE,再这么手残的话考场上就真的要犯逗了. #include<cstdio> #include ...

  3. java eclipse打jar包和执行jar中的main函数

    jar包使用eclipse打包步骤 右键需要打包的项目->选择Export 到这里有两种打包的方式 1.如果项目中没有使用其他第三方包等,则直接选择下图中的第一种即可(JAR file) 2.如 ...

  4. 第6届蓝桥杯javaA组第7题，牌型种数，一道简单的题带来的思考

    题目: 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不考虑自己得到 ...

  5. Python 编程小备忘

    1. 获取当前日期,或者间隔当前任意天的日期. >>> import datetime>>> print (datetime.date.today()-dateti ...

  6. 【BZOJ-3638&3272&3267&3502】k-Maximum Subsequence Sum 费用流构图 + 线段树手动增广

    3638: Cf172 k-Maximum Subsequence Sum Time Limit: 50 Sec  Memory Limit: 256 MBSubmit: 174  Solved: 9 ...

  7. 【BZOJ-2229】最小割 最小割树（最大流+分治）

    2229: [Zjoi2011]最小割 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1565  Solved: 560[Submit][Status ...

  8. linux远程登陆其他主机并执行命令的若干方式

    一.命令行登陆 ssh后,一定后边加双引号 写命令,否则命令实在本地执行的,多条命令的话用双引号隔开, ssh user@remoteNode "cd /home ; ls" 二. ...

  9. HA模式手动切换namenode状态

    查看状态 hdfs haadmin -getServiceState nn1 有时候通过网页访问两个namenode的http-address,看到默认的主namenode状态变成了standy,这时 ...

  10. bzoj1724: [Usaco2006 Nov]Fence Repair 切割木板

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...