(新手向)基于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的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
随机推荐
- html5 播放多个视频。一个接一个的播放
new个video,指定播放列表的第一个视频路径为src.监听end事件,回调里面把video的src改成列表的下一个,再play. 示意代码:var vList = ['视频地址url1', 'ur ...
- [转]Null value was assigned to a property of primitive type setter of"原因及解决方法
原文地址:http://blog.csdn.net/kevinzhangfei/article/details/6995316 在action请求数据的过程中报出"Null value wa ...
- 【BZOJ 1030】【JSOI 2007】文本生成器 AC自动机+递推
一直不理解到底怎么做啊,想了好久$TwT$ 最后终于明白了为什么找到第一个满足条件的$fail$就计算,因为避免重复,这个回答,,, 然后$root$下面要接上26个节点,这里26个字母中不在字典内的 ...
- 第一个PyQt程序
这个程序虽然小,具备pyqt程序的皱型,可以作为一个模板使用了 #!/usr/bin/python3 # -*- coding: utf-8 -*- import sys from PyQt5.QtW ...
- Android中处理崩溃异常CrashHandler
来源:http://blog.csdn.net/liuhe688/article/details/6584143 大家都知道,现在安装Android系统的手机版本和设备千差万别,在模拟器上运行良好的程 ...
- 【POJ 1698】Alice's Chance(二分图多重匹配)
http://poj.org/problem?id=1698 电影和日子匹配,电影可以匹配多个日子. 最多有maxw*7个日子. 二分图多重匹配完,检查一下是否每个电影都匹配了要求的日子那么多. #i ...
- 使用触发器实现记录oracle用户登录失败信息到alert.log日志文件
前面我们说了用oracle自带的审计功能可以实现记录用户登录失败日志到数据表中(链接:http://www.54ok.cn/6778.html).今天我们来分享一下如何把用户登录失败信息记录到aler ...
- 2.Android 自定义通用的Item布局
转载:http://www.jianshu.com/p/e7ba4884dcdd BaseItemLayout 简介 在工作中经常会遇到下面的一些布局,如图标红处: 05.png 07.png 08. ...
- Leetcode 74 and 240. Search a 2D matrix I and II
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- Python:Sqlmap源码精读之解析xml
XML <?xml version="1.0" encoding="UTF-8"?> <root> <!-- MySQL --&g ...