(新手向)基于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下发 ...