（新手向）基于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


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函数后，就可以直接调用直接调用
时间： 2024-08-25 01:47:19

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

原生js简单轮播图 代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

bootstrap 2版本轮播图

使用bootstrap 2的轮播图遇到了一些小问题,在这里记录总结一下. 1. 问题:Uncaught TypeError: e is not a function. 原因:jquery.js没有放在bootstrap.js之前,按照要求以及JS的加载顺序来说,jq一定要放在bootstrap.js之前,查看代码果然是这个原因 2. 问题:点击圆点和左右切换按钮,没有效果,且不报错,但是轮播可以自动播放 原因:对bootstrap轮播图的不理解. ①控制图片切换的圆点属性"data-target

手把手原生js简单轮播图

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

vue上的简单轮播图

好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用.moveLeft向左移动一个格子,造成滚动的假象,此时第二张图在第一个格子的位置: 这时候把第一个格子 li 的元素摘下接到 ul 末尾,并马上撤掉.moveLeft.每张图都在自己的格子上. 定时器循环该操作,一直轮播.可以用touch事件添加touchmove左右滑动效果和切换图片的功能,就不

js写的简单轮播图

这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放,离开自动播放6.移动到导航上,切换相对应的导航 然后贴代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume

基于Jquery实现的轮播图

前阵子我用js写了一个轮播图,现在的话换成jQuery来实现,先看看效果图 首先是html结构,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版图片轮播</title> <link rel="stylesheet" href="css/index.css" /> &l

原生js写简单轮播图方式１－从左向右滑动

轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理 相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片.点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#i

使用vue的v-show和transition制作一个简单轮播图

<template> <!--轮播图--> <div class="carousel-wrap" id="carousel"> <transition-group tag="ul" class='slide-ul' :name="transitionName"> <li v-for="(list,index) in slideList" :key=&qu

简单轮播图

(一)html: <title>jquery实现轮播图</title> <link rel="stylesheet" href="icon/iconfont.css"> <div id="slider"> <img src="img/1.jpg" style="display:block;"> <img src="img/2.jpg