我现在在学html，也在给实验室研发的App写使用说明，嗯呢，用的就是网页形式，好吧，为什么要学这个呢，主要就是我不想学Java，哪里来的抵触我也是不知道，但是顺从我的内心，不想学就不学咯，哈哈哈。


轮播图，我感觉有点吊，有点嚣张，主要还是我花了这么久看它，好吧，其实也没有很久，也就是周天（昨天）打游戏的空隙间以及今早，不过呢，为了我这惨不忍睹的记忆力，我还是烂笔头的记记笔记吧。


方法一
html+css+jquery
html部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="slideShow">
	<ul>
		<li><a href="#"><img src="http://pic.yuti.site/1.jpg" alt="" /></a></li>
		<li><a href="#"><img src="http://pic.yuti.site/2.jpg" alt="" /></a></li>
		<li><a href="#"><img src="http://pic.yuti.site/3.jpg" alt="" /></a></li>
		<li><a href="#"><img src="http://pic.yuti.site/4.jpg" alt="" /></a></li>
	</ul>
	
	<div class="showNav">
		<span class="active">1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
</div>


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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
* {
margin: 0;
padding: 0;
}
ul {
   /*去掉圆点，即li的样式*/
	list-style: none;
}
.slideShow {
	width: 800px;
	height: 600px;
	/*图片的高度和宽度*/
	border: 1px solid #eee;
	margin: 100px auto;
	position: relative;
	/*将溢出框架的图片部分隐藏起来 框架大小即为800*600*/
	overflow: hidden;
}
.slideShow ul {
   /*这里的width>每张图片的宽度*张数*/
	width: 2500px;
	/*添加下面一句话，图片才不会叠一起*/
	position: relative;
}
.slideShow ul li {
   /*运用了float：left就可以按顺序的排列在一行，没有这个属性将不可以左右移动*/
	float: left;
	width: auto;
}
.slideShow .showNav {
   /*用绝对定位给数字按钮进行布局，即数字按的位置，右下角*/
	position: absolute;
	right: 10px;
	bottom: 5px;
	text-align: center;
	font-size: 12px;
	line-height: 20px;
}
.slideShow .showNav span {
    /*鼠标的形式*/
	cursor: pointer;
	display: block;
	float: left;
	width: 20px;
	height: 20px;
	background: #ff5a28;
	margin-left: 2px;
	color: #fff;
}
.slideShow .showNav .active {
	background: #b63e1a;
}


jQuery部分
在写jQuery的代码之前，得先在html界面引入
 <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>


最好在head里面引入，不容易出错


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
$(document).ready(function(){
var slideShow = $(".slideShow");
var ul = slideShow.find("ul");
//	获取按钮
	var showNumber = slideShow.find(".showNav span");  
//	获取每个图片的宽度 这里eq(0)，为什么这里是0呢，主要是因为这里的每一张图片都是一样的
	var oneWidth = slideShow.find("ul li").eq(0).width();
	var timer = null;
	var iNow = 0;
	
//	每一个数字按钮绑定一个点击事件
	showNumber.on("click",function(){
		$(this).addClass("active").siblings().removeClass("active");
//		获取this的index位置,即下标数字
		var index = $(this).index();
		iNow = index;
//		animate动画效果
		ul.animate({ "left":-oneWidth*iNow });
	});
	function autoplay() {
		timer = setInterval(function(){
			iNow++;
			if(iNow >showNumber.length-1){
				iNow = 0;
			}
//			被选中元素触发click事件
			showNumber.eq(iNow).trigger("click");
		}, 2000);
	}
	autoplay();
	slideShow.hover( function(){
		clearInterval(timer);
	}, autoplay);
});


方法二
swiper框架的使用
html部分
在使用swiper之前呢，得在head里面添加这样的语句


1
2
3
<link rel="stylesheet" href="css/swiper-4.2.2.min.css" />
<script type="text/javascript" src="js/swiper-4.2.2.min.js" ></script>
<script type="text/javascript" src="js/swiper.jquery.min.js" ></script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="http://pic.yuti.site/1.jpg" /></div>
		<div class="swiper-slide"><img src="http://pic.yuti.site/2.jpg" /> </div>
		<div class="swiper-slide"><img src="http://pic.yuti.site/3.jpg" /> </div>
		<div class="swiper-slide"><img src="http://pic.yuti.site/4.jpg" /> </div>
	</div>
	<!--分页器-->
	<div class="swiper-pagination"></div>
	<!--导航按钮-->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<!--滚动条-->
	<div class="swiper-scrollbar"></div>
</div>


CSS部分
1
2
3
4
.swiper-container {
	width: 800px;
	height: 600px;
}


jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
	var mySwiper = new Swiper('.swiper-container', {
	   //滚动方向：左右移动
		direction:'horizontal',
		//自动播放的时间
		autoplay:2000,
		//是否循环播放
		loop:true,
		//是否需要分页器（小圆点）
		pagination:'.swiper-pagination',
		//点击分页器是否切换到对应的图片 是true，否false
		paginationClickable:true,
		//如果需要前进后退按钮
		nextButton:'.swiper-button-next',
		prevButton:'.swiper-button-prev',
		//用户操作swiper之后，是否禁止autoplay。默认为true：停止
		//如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
		//操作包括触碰、拖拽、点击pagination等等
		autoplayDisableOnInteraction:false,
	});
});




over!


这一次是弄代码高亮弄了很久，结果发现markdown有自带这样的效果，时间就这么溜走了，难受。


编写时，右边的展示图没有高亮效果，得在Terminal中输入hexo s –debug的语句，进行localhost:4000的本地预览就可以出现这样的效果。


smile！