swiper插件的使用demo
老习惯，废话不多说，直接上代码
1.PC端，swiper2，滑动效果
先要引入idangerous.swiper2.7.6.css和idangerous.swiper2.7.6.js（需要先引入jquery类库）；
(1)html文件内容：
<!-- 如果需要在图片可视区的周围添加一些样式，需要在外层套上一层<div> -->
<div class="mywrapper">
<!-- 图片可视区 -->
<div class="swiper-container">
<!-- 包裹图片的父级元素 -->
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../img/slide1.png" alt=""></div>
<div class="swiper-slide"><img src="../img/slide2.png" alt=""></div>
<div class="swiper-slide"><img src="../img/slide3.png" alt=""></div>
</div> <!-- 前进和后退按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div> <!-- 放在外部的分页器容器 -->
<div class="nav">
<!-- 图片对应的分页器 -->
<div class="swiper-pagination"></div>
</div> <!-- 文本容器 -->
<ul class="text">
<li class="active">轻松查看所有交易记录，对账简洁方便</li>
<li>支持被扫支付，更快更方便，收款从此无忧</li>
<li>被扫交易完成结果自动弹出，自动退出，减少更多操作</li>
</ul>
(2)less文件内容：
.swiper-container-wrapper {
/* 设置图片可视区的外层<div>的样式 */
width: 906px;
height: 570px;
margin: 50px auto;
paddding-top: 20px;
box-sizing: border-box;
.bgImg('/swiper_container.png');
.bgSize(100, 100%);
/* 因为后面将带有绝对定位属性的前进和后退按钮放在了图片可视区的外面，所以需要给外层<div>添加相对定位 */
position: relative;
/* 设置图片可视区内的样式 */
.swiper-container {
/* 设置图片可视区的宽高，因为自带了margin: 0 auto; 所以会在外层<div>里水平居中*/
width: 626px;
height: 470px;
.swiper-wrapper {
.swiper-slide {
/* 不用管.swiper-wrapper和.swiper-slide，只需要设置里面的图片样式 */
img {
width: 626px;
height: 470px;
}
}
}
}
/* 设置后退按钮的样式 */
.swiper-button-prev {
width: 40px;
height: 80px;
.bgImg('/swiper_prev.png');
.bgSize(100, 100%);
position: absolute;
left:;
top: 50%;
margin-top: -60px;
}
/* 设置前进按钮的样式 */
.swiper-button-next {
width: 40px;
height: 80px;
.bgImg('/swiper_next.png');
.bgSize(100, 100%);
position: absolute;
right:;
top: 50%;
margin-top: -60px;
}
}
.nav {
/* 因为分页器自带绝对定位属性，所以需要给它的父级元素添加相对或者绝对定位属性，并且给予一个固定的高度 */
position: relative;
height: 50px;
.swiper-pagination {
/* 设置分页器的样式，水平居中，清除浮动 */
width: 906px;
padding-left: 105px;
box-sizing: border-box;
.clearFl;
/* 设置每一个分页按钮的样式 */
.swiper-pagination-switch {
.fl;
width: 100px;
height: 30px;
font-size: 20px;
color: #999;
margin-right: 100px;
cursor: pointer;
}
/* 设置每一个分页按钮被选中时的样式 */
.swiper-active-switch {
color: #000;
}
}
}
/* 设置图片对应的文本内容的样式 */
.text {
position: relative;
height: 50px;
li {
width: 400px;
position: absolute;
left: 50%;
margin-left: -200px;
top:;
font-size: 20px;
opacity:;
line-height: 35px;
&.active {
opacity:;
}
}
}
(3)js文件内容：
$(function(){
// 实例化mySwiper对象
var mySwiper = new Swiper ('.swiper-container',{
initialSlide: 0 , //设置初始化时slide的索引，默认0
autoplay: 2000, // 设置自动切换的时间间隔，默认0
speed: 3000, // 设置滑动速度，默认为300
loop: true, // 是否开启无缝轮播，默认false
loopAdditionalSlides: 0, // 设置loop模式下在slides前后复制若干个slide，默认为0，即前后各复制一个(0,1,2 --> 2,0,1,2,0)
slidesPerView: 1, //设置slider容器能够同时显示的slides数量，默认为1，如果要选auto还需设置loopedSlides参数
slidesPerGroup: 1, //设置上述情况下slides的数量多少为一组，默认为1,
useCSS3Transforms: false, // 不想使用css3 transforms来设定slide的位移而是使用wrapper的left/top属性则可以将此参数设置为false
DOMAnimation: true, // 在不支持css transitions(IE7-9)的浏览器上是否使用自定义的DOM动画，默认为true,
pagination: '.swiper-pagination', //定义分页器，默认会在这个分页器里面生成与slide对应的<span>标签，要求类型是css选择器或者HTML标签
paginationClickable: true, // 当值为true时，点击分页器的指示点时会发生Swiper
autoplayDisableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay，默认为true
onSlideChangeStart: function(swiper){ // 触发slider切换的回调函数，输出的activeIndex是切换后的slide索引值
// 同步改变每个分页器对应的在轮播图之外的内容
var idx = swiper.activeIndex - 1;
var textArr = $('.text li',$('.figure_wrap'));
textArr.eq(idx).addClass('active').siblings().removeClass('active');
// 由于每次切换的时候，类名会自动替换，最开始追加的自定义类名会消失，所以需要在这里重新追加
var switchArr = $('.swiper-pagination span');
switchArr.each(function(idx,ele){
$(this).addClass('bullet'+idx);
})
},
freeMode :false, // 若为true则是自由模式，不会自动贴合滑动位置
noSwiping: false, // 设为true时，可以在slide上增加类名'swiper-no-swiping'，使该slide无法滑动
simulateTouch: true, // 默认为true，Swiper接受鼠标点击、拖动。
followFinger: false, // 如设置为false，拖动slide时它不会动，当你释放时slide才会切换
}
// 自定义分页器里面的文本内容，有时需要给每个选项追加新的类名
var switchArr = $('.swiper-pagination span');
switchArr.eq(0).text('第一个分页按钮').addClass('bullet0') ;
switchArr.eq(1).text('第二个分页按钮').addClass('bullet1') ;
switchArr.eq(2).text('第三个分页按钮').addClass('bullet2') ;
// 自定义前进和后退按钮
$('.swiper-button-prev').on('click',function(){
mySwiper.swipePrev();
})
$('.swiper-button-next').on('click',function(){
mySwiper.swipeNext();
})
})
更多参数请去官网自行查询，http://2.swiper.com.cn/api/index.html
2.移动端，swiper3，滑动效果
先要引入swiper-3.4.1.min.css和swiper-3.4.1.jquery.min.js（需要先引入jquery类库）；
(1)html文件内容：
<div class="figure_wrap">
<!-- 放在外部的分页器容器 -->
<div class="nav">
<!-- 图片对应的分页器 -->
<div class="swiper-pagination"></div>
</div> <!-- 图片和对应的文本的外层容器 -->
<div class="figure">
<!-- 文本容器 -->
<div class="text">
<section class="active">
<h3>公众号收银台</h3>
<p>润联网络在微信中建立了公众号收银台，同时支持支付宝和微信收款，收银台不仅拥有完善的店员等级管理系统，同时还能用于POS收银机商户。</p>
<div class="wrap"><a href="subscription.html">了解更多 ></a></div>
</section> <section>
<h3>POS收银机</h3>
<p>润联POS终端收银机，不仅支持普通的刷卡业务，同时能使用订单支付，并且绑定手机公众号后，能使用公众号的功能，也能绑定多个收银员收款。</p>
<div class="wrap"><a href="pos.html">了解更多 ></a></div>
</section> <section>
<h3>收银宝软件</h3>
<p>润联收银宝是在WINDOWS系统上开发的，用于收银机上的收款软件，具有打印公众号收银小票和利用扫码枪反扫收款等功能。</p>
<div class="wrap"><a href="cashbaby.html">了解更多 ></a></div>
</section>
</div> <!-- 图片容器，也叫图片的可视区 -->
<div class="swiper-container">
<!-- 包裹图片的父级元素 -->
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/slide1.png" alt=""></div>
<div class="swiper-slide"><img src="img/silde2.png" alt=""></div>
<div class="swiper-slide"><img src="img/silde3.png" alt=""></div>
</div>
</div>
</div>
</div>
(2)less文件内容：
.figure_wrap{
.nav{
/* 因为分页器自带绝对定位属性，所以需要给它的父级元素添加相对或者绝对定位属性，并且给予一个固定的高度 */
position: relative;
height: 2.65rem;
padding: 0.7rem 0.4rem 0.4rem;
box-sizing: border-box;
.swiper-pagination{
/* 因为分页器自带绝对定位属性，如果需要依据父级元素来确定宽度，就要设置宽度百分比或者css3的计算函数 */
width: calc(~'100% - 0.8rem');
/* 添加弹性盒，子元素就会自动归为一行并且不会产生多余的空隙 */
display: block;
.swiper-pagination-bullet{
/* 因为每一个分页按钮自带了固定的宽高，所以需要按照自己的需求进行手动修改 */
width: auto;
height: 1.55rem;
/* 横向均分父元素的宽度 */
flex:;
/* 因为每一个分页按钮自带了圆角、透明度、背景颜色以及手势样式，所以需要按照自己的需求进行手动修改 */
border-radius:;
opacity:;
cursor: auto;
/* 添加其他公共样式 */
font-size: 0.28rem;
color: #999;
display: flex;
justify-content: center;
align-items: flex-end;/* 对每一个分页按钮添加私有样式 */
&.bullet1{
.bgImg('/product_page1.png',center);
.bgSize(0.52rem);
}
&.bullet2{
.bgImg('/product_page2.png',center);
.bgSize(1.05rem);
}
&.bullet3{
.bgImg('/product_page3.png',center);
.bgSize(1rem);
}
/* 修改和添加被选中的分页按钮的样式 */
&.swiper-pagination-bullet-active{
color: @color_blue;
&.bullet1{
.bgImg('/product_page1_active.png',center);
.bgSize(0.52rem);
}
&.bullet2{
.bgImg('/product_page2_active.png',center);
.bgSize(1.05rem);
}
&.bullet3{
.bgImg('/product_page3_active.png',center);
.bgSize(1rem);
}
}
}
}
}
.figure{
padding: 0.55rem 0.4rem 0.85rem;
/* 设置图片对应的文本内容的样式 */
.text{
height: 3.5rem;
position: relative;
section{
position: absolute;
left:;
top:;
display: none;
&.active{
display: block;
}
h3{
font-size: 0.36rem;
}
p{
font-size: 0.28rem;
line-height: 0.5rem;
margin: 0.35rem 0 0.4rem;
}
.wrap{
a{
display: block;
font-size: 0.28rem;
color: @color_blue;
}
}
}
}
/* 修改和添加图片区域的样式 */
.swiper-container{
/* 给定可视区容器的宽高 */
width: 5.5rem;
height: 4rem;
margin: 0 auto;
.swiper-wrapper{
.swiper-slide{
/* 因为.swiper-wrapper和.swiper-slide的宽度都是默认100%，所以都是和可视区的宽高相匹配，只需要设置里面的图片样式 */
display: flex;
justify-content: center;
align-items: center;
img{
&:nth-child(1){
width: 4.42rem;
}
&:nth-child(2){
width: 5.42rem;
}
&:nth-child(3){
width: 5.23rem;
}
}
}
}
}
}
}
(3)js文件内容：
$(function(){
// 实例化swiper
var mySwiper = new Swiper('.swiper-container',{
effect: 'slide', // 设置slide的切换效果，默认为slide
autoplay: 0, // 设置自动切换的时间间隔，默认为0，不设定该参数或者设为0，slide不会自动切换
speed: 1000, // 设置切换效果所需要花费的时间，默认为300
loop: true, // 是否无缝循环，默认为false
loopAdditionalSlides: 0, // loop模式下会在slides前后复制若干个slide，默认为0，即前后各复制1个
pagination: '.swiper-pagination', // 设置分页器容器的css选择器或HTML标签
paginationType: 'bullets', // 设置分页器样式类型，默认为'bullets'即圆点
paginationClickable: true, // 是否可以点击分页器来控制切换，默认为false
autoplayDisableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay，默认为true
paginationHide: false, // 点击swiper是否会隐藏分页器，默认为false
paginationElement: 'li', // 设定分页器指示器的HTML标签，默认为'span'，如果是自定义渲染，此项设置无效
paginationBulletRender: function (swiper,index, className) { // 自定义当样式为'bullets'时分页器的内容，接受当前页的索引值和类名作为参数
// console.log(arguments);
var className2;
var text;
switch(index){
case 0:
className2 = 'bullet1';
text = '这是第一个分页按钮';
break;
case 1:
className2 = 'bullet2';
text = '这是第二个分页按钮 ';
break;
case 2:
className2 = 'bullet3';
text = '这是第三个分页按钮 ';
break;
}
return '<div class="' + className + ' ' + className2 + '">' + text +'</div>'; // 实际显示多个具有某个相同类名的通用标签，不同的是各自另外带上的类名和标签的文本内容
},
// paginationCustomRender: function (swiper,current, total) { // 自定义当样式为'custom'时分页器的内容，接受当前页数和总数作为参数
// return '<span class="' + current + '">' + current +'of' + total +'</span>'; // 实际显示一个通用的标签，改变的只是该标签的文本内容
// },
uniqueNavElements: false, // 默认为true，表示仅本swiper的container内的分页器有效，设置为false后，container以外的分页器也生效了
prevButton: '.swiper-button-prev', // 设置前进按钮的css选择器或HTML元素
nextButton: '.swiper-button-next', // 设置后退按钮的css选择器或HTML元素
preventClicks: true ,// 是否在swiper发生触摸时阻止默认事件（preventDefault），默认为true
onSlideChangeStart: function(swiper){ // 触发slider切换的回调函数，输出的activeIndex是切换后的slide索引值
// 同步改变每个分页器对应的在轮播图之外的内容
var idx = swiper.activeIndex - 1;
var textArr = $('.text section',$('.figure'));
$(textArr[idx]).addClass('active').siblings().removeClass('active');
}
});
})
更多参数请去官网自行查询，http://www.swiper.com.cn/
3.移动端，swiper3，渐隐渐现效果
先要引入swiper-3.4.1.min.css和swiper-3.4.1.jquery.min.js（需要先引入jquery类库）；
(1)html文件内容：
<!-- 如果需要在图片可视区的周围添加一些样式，需要在外层套上一层<div> -->
<div class="swiper-container-wrapper">
<!-- 图片可视区 -->
<div class="swiper-container">
<!-- 包裹图片的父级元素 -->
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/slide1.png" alt=""></div>
<div class="swiper-slide"><img src="img/slide2.png" alt=""></div>
<div class="swiper-slide"><img src="img/slide3.png" alt=""></div>
</div>
</div> <!-- 前进和后退按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div> <!-- 放在外部的分页器容器 -->
<div class="nav">
<!-- 图片对应的分页器 -->
<div class="swiper-pagination"></div>
</div> <!-- 文本容器 -->
<ul class="text">
<li class="active">这是第一个分页对应的文本</li>
<li>这是第二个分页对应的文本</li>
<li>这是第三个分页对应的文本</li>
</ul>
(2)less文件内容：
.swiper-container-wrapper{
/* 设置图片可视区的外层<div>的样式 */
height: 4.2rem;
.bgImg('/swiper_container.png');
.bgSize;
/* 因为子元素设置了margin-top，为了防止父元素下沉，所以要加上overflow:hidden; */
overflow: hidden;
/* 设置图片可视区内的样式 */
.swiper-container{
/* 设置图片可视区的宽高，因为自带了margin: 0 auto; 所以会在外层<div>里水平居中*/
width: 4.5rem;
height: 3.45rem;
margin-top: 0.15rem;
.swiper-wrapper{
.swiper-slide{
/* 不用管.swiper-wrapper和.swiper-slide，只需要设置里面的图片样式 */
img{
width: 4.7rem;
height: 3.54rem;
}
}
}
}
/* 隐藏前进和后退按钮 */
.swiper-button-prev,.swiper-button-next{
display: none;
}
}
.nav{
/* 因为分页器自带绝对定位属性，所以需要给它的父级元素添加相对或者绝对定位属性，并且给予一个固定的高度 */
position: relative;
height: 1rem;
line-height: 1rem;
.swiper-pagination{
/* 因为分页器自带绝对定位属性，如果需要依据父级元素来确定宽度，就要设置宽度百分比或者css3的计算函数 */
width: 100%;
/* 添加弹性盒，子元素就会自动归为一行并且不会产生多余的空隙 */
display: flex;
.swiper-pagination-bullet{
/* 因为每一个分页按钮自带了固定的宽高，所以需要按照自己的需求进行手动修改 */
width: auto;
height: auto;
/* 横向均分父元素的宽度 */
flex:;
/* 因为每一个分页按钮自带了圆角、透明度、背景颜色以及手势样式，所以需要按照自己的需求进行手动修改 */
border-radius:;
opacity:;
cursor: auto;
background-color: transparent;
/* 添加其他公共样式 */
font-size: 0.2rem;
color: #999;
/* 修改和添加被选中的分页按钮的样式 */
&.swiper-pagination-bullet-active{
color: #000;
}
}
}
}
/* 设置图片对应的文本内容的样式 */
.text{
position: relative;
height: 1rem;
line-height: 1rem;
li{
width: 100%;
font-size: 0.28rem;
opacity: 0;
position: absolute;
left:;
top:;
transition: opacity 0.5s;
&.active{
opacity: 1;
transition: opacity 0.5s;
}
}
}
(3)js文件内容：
$(function(){
var mySwiper = new Swiper('.swiper-container',{
effect: 'fade', // 设置slide的切换效果，默认为slide
fade: false, // 设置fade的效果参数，默认为false，表示关闭淡出，即过渡中的slide透明度从0->1（淡入），其他slide透明度变为0
autoplay: 2000, // 设置自动切换的时间间隔，默认为0，不设定该参数或者设为0，slide不会自动切换
speed: 1000, // 设置切换效果所需要花费的时间，默认为300
loop: true, // 是否无缝循环，默认为false
loopAdditionalSlides: 0, // loop模式下会在slides前后复制若干个slide，默认为0，即前后各复制1个
pagination: '.swiper-pagination', // 设置分页器容器的css选择器或HTML标签
paginationType: 'bullets', // 设置分页器样式类型，默认为'bullets'即圆点
paginationClickable: true, // 是否可以点击分页器 来控制切换，默认为false
autoplayDisableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay，默认为true
paginationHide: false, // 点击swiper是否会隐藏分页器 ，默认为false
paginationElement: 'li', // 设定分页器指示器的HTML标签，默认为'span'，如果是自定义渲染，此项设置无效
paginationBulletRender: function (swiper,index, className) { // 自定义当样式为'bullets'时分页器的内容，接受当前页的索引值和类名作为参数
// console.log(arguments);
var text;
switch(index){
case 0:
text = '这是第一个分页按钮';
break;
case 1:
text = '这是第二个分页按钮 ';
break;
case 2:
text = '这是第三个分页按钮 ';
break;
}
return '<div class="' + className + '">' + text +'</div>'; // 实际显示多个类名相同的通用标签，不同的是各自的文本内容
},
// paginationCustomRender: function (swiper,current, total) { // 自定义当样式为'custom'时分页器的内容，接受当前页数和总数作为参数
// return '<span class="' + current + '">' + current +'of' + total +'</span>'; // 实际显示一个通用的标签，改变的只是该标签的文本内容
// },
uniqueNavElements: true, // 默认为true，表示仅本swiper的container内的分页器有效，设置为false后，container以外的分页器也生效了
prevButton: '.swiper-button-prev', // 设置前进按钮的css选择器或HTML元素
nextButton: '.swiper-button-next', // 设置后退按钮的css选择器或HTML元素
preventClicks: true ,// 是否在swiper发生触摸时阻止默认事件（preventDefault），默认为true
onSlideChangeStart: function(swiper){ // 触发slider切换的回调函数，输出的activeIndex是切换后的slide索引值
// 同步改变每个分页器对应的在轮播图之外的内容
var idx = swiper.activeIndex - 1;
var textArr = $('.text li',$('.figure_wrap'));
$(textArr[idx]).addClass('active').siblings().removeClass('active');
}
})
})
更多参数请去官网自行查询，http://www.swiper.com.cn/
swiper插件的使用demo的更多相关文章
- ionic3 使用swiper插件 实现轮播效果
由于app的更新迭代 我需要完成新版本设计图的开发 刚开始就遇到一个问题 首页的banner图需要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果 效果图如下 自动播放 不断 ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
- swiper插件在ie浏览器无反应，解决办法
在写pc端页面时,用swiper插件发现在ie中用不了,百度下说是swiper从3以后向手机端发展,所以在pc端无响应.后来了解到,swiper3是专门针对移动端写的.如果想兼容IE8的话,应该引入s ...
- 移动端网站的内容触摸滑动-Swiper插件
手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...
- swiper插件的简单使用，实现图片轮播
移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...
- swiper插件遇上tab切换
当swiper插件遇到tab切换,即display的显示与否属性时,失效,方法如下: <script language="javascript"> var mySwip ...
- 手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
- 【react开发】使用swiper插件，loop:true时产生的问题解决方案
这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...
- swiper插件几个容易忽略的地方
以下内容为swiper4版本的 1.在我们用swiper插件做轮播的当我们左右滑动后会出现自动轮播停止了 此时我们需要在autoplay中 加上这个属性 autoplay:{ delay:1000, ...
随机推荐
- 必备的实用jQuery代码段（1）
1. 如何正确地使用toggleClass: //切换(toggle)类允许你根据某个类的 //是否存在来添加或是删除该类. //这种情况下有些开发者使用: a.hasClass('blueButto ...
- HTML5定稿：手机App将三年内消失，互联网世界的第二次大战
HTML5与app以对立竞争的产品形态展现在大众视野.从去年开始又有一大批技术派或者创业者盯向html5领域,移动游戏的爆发和微信朋友圈等众多平台为HTML5导流,能不能颠覆,或许只是时间上的问题. ...
- swift 中使用OC第三方库（以AFNetworking为例）
首先呢 把你需要的第三方库导入到你的项目中来 具体怎么导入 这不是这篇的重点 看上一篇 废话不多 直接上 (1)在项目中直接建一个 oc 的控制器 然后xcode会提醒你 要不要建造桥接文 ...
- Usermod：user oracle is currently logged in 家目录不能改变解决方法
[root@HE1 ~]# usermod -u 200 -g oinstall -G dba,asmdba,oper oracle[root@HE1 ~]# id oracleuid=200(ora ...
- JS高级程序设计--笔记
1.JS分三个部分:ECMAScript.DOM.BOM 1)ECMAScript:提供核心语言功能 2)DOM:提供访问和操作网页内容的方法和接口 3)BOM:提 ...
- MD5碰撞后时代，MD5还有存在的意义吗？
MD5是一种HASH函数,又称杂凑函数,由32位16进制组成,在信息安全范畴有广泛和首要运用的暗码算法,它有类似于指纹的运用.在网络安全协议中, 杂凑函数用来处理电子签名,将冗长的签名文件紧缩为一段一 ...
- 蓝桥网试题 java 基础练习 十进制转十六进制
---------------------------------------------------------------------------------------------------- ...
- shell编程其实真的很简单（三）
通过前两篇文章,我们掌握了shell的一些基本写法和变量的使用,以及基本数据类型的运算.那么,本次就将要学习shell的结构化命令了,也就是我们其它编程语言中的条件选择语句及循环语句. 不过,在学习s ...
- HUST 1584 摆放餐桌
1584 - 摆放餐桌 时间限制:1秒 内存限制:128兆 609 次提交 114 次通过 题目描述 BG准备在家办一个圣诞晚宴,他用一张大桌子招待来访的客人.这张桌子是一个圆形的,半径为R.BG邀请 ...
- Java实现二叉树的前序、中序、后序遍历（非递归方法）
在上一篇博客中,实现了Java中二叉树的三种遍历方式的递归实现,接下来,在此实现Java中非递归实现二叉树的前序.中序.后序遍历,在非递归实现中,借助了栈来帮助实现遍历.前序和中序比较类似,也简单 ...