(新手向)基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事。鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路。通过手机访问电脑内的图片。
首先是本地站点搭建:win+R输入mmc打开控制台,文件-添加/删除管理单元,Internet信息服务。添加确定,右侧基本信息,新建网站-把路径改了。设定一个端口号,手机浏览器就可以输入 电脑局域网ip:端口号 就可以访问电脑了。
代码清单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的简单轮播图的手机实现的更多相关文章
- 2.bootstrap练习笔记-轮播图
bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...
- JS---案例:简单轮播图
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- Bootstrap插件-carousel(轮播图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
随机推荐
- “Ceph浅析”系列之一——前言
开源技术专家章宇同学(@一棹凌烟)在C3沙龙分享过Ceph之后,最近来了劲头,一口气写了一系列<Ceph浅析>的博文,共8篇: "Ceph浅析"系列之一--前言 &qu ...
- Linux_Shell_Bash快捷键
来自为知笔记(Wiz)
- 【BZOJ 4598】【SDOI 2016 Round2 Day1 T3】模式字符串
2016-05-21因为BZOJ上“ 数据文件太过巨大,仅提供前三组数据测试.”所以我考场上写的60分的点分治交上去也A了. 我的这个点分治的时间复杂度是$O(Tnmlogn)$的,听题解时没听懂$O ...
- 【hihoCoder 1036】Trie图
看了一下简单的$Trie图$,调模板调啊调一连调了$2h$,最后发现$-'a'$打成$-'A'$了hhh,有种摔键盘的冲动. $Trie图$是$Trie树$上建立“前缀边”,不用再像在$Trie树$上 ...
- Eclipse 中 安装 SVN 插件
方法一:使用Eclipse 安装向导安装 1.测试所指环境 Eclipse 4.5/Mars 2.svn 插件的官方网站: http://subclipse.tigris.org 3.打开eclip ...
- java-正则表达式过滤字符串中的html标签
案例 import java.util.regex.Matcher; import java.util.regex.Pattern; /** * <p> * Title: HTML相关的正 ...
- linux centos中使用yum安装tomcat
在linux下部署java开发的web应用,一般采用Tomact+jre环境(可不需要apache),在RHEL和CentOS下,可以采用yum在线自动安装方式安装,具体操作如下: 可以先查看tomc ...
- IE6、IE7、IE8的CSS、JS兼容
Internet Explorer 6中查看使用 Microsoft JScript 的网页,可能会遇到web浏览器速度较慢的性能问题.原因是如果js脚本同时创建大量变量,jscript引擎执行垃圾收 ...
- 将代码托管到OSChina服务器上
前言:前面的文章已经介绍过了如何将代码托管到github的服务器.并且笔者也详细的介绍了使用HTTPS和SSH两种不同的身份验证方式.但是仅仅介绍github的使用是不够的,原因笔者已经在前面的文章中 ...
- 【matlab】设定函数默认参数
C++/java/python系列的语言,函数可以有默认值,通常类似如下的形式: funtion_name (param1, param2=default_value, ...) 到了matlab下发 ...