专栏首页算法与编程之美微信小程序|利用carouse制作轮播图

微信小程序|利用carouse制作轮播图

1 轮播图

轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它。轮播图最大的优点就是节约的空间——同一个地方会展示多页内容,使得主屏上的位置可以展示多页内容。虽然一次只展现一个页面,但它轮流播放的方式,在一定程度上缓解了用户的审美疲劳。

2 完成过程

轮播图的编写是非常常见的。在以前的编写过程中,利用过h5,小程序编写,但是在这样的编写过程中,需要将各种功能和代码,样式全部详细清晰的设置。而引用bootstrap封装样式,将在很大程度上减少代码。编写思路如下:

(1)首先需要制作一个div=” carousel Slider”, carousel是轮播插件,后面所有的东西都会放在这个div里面。SliderShow是vue的轮播图组件插件,它支持自动切换,鼠标经过停止切换,分页/任意页点击切换,左右切换。在这里可以为 slidershow 层添加 slide 样式,使用图片与图片切换效果有平滑感。

(2)之后制作轮播图片播放区。这里将使用 carousel-inner 样式来控制,而且其同样放置在 carousel 容器内,并且通过 item 容器来放置每张轮播的图片。如下我们就将图片放进了播放区。

<div class="carousel-inner">

 <div class="item active">

     <a href="##"><img src="img/1.jpeg" alt=""></a>

 </div>

 <div class="item">

     <a href="##"><img src="img/2.jpeg" alt=""></a>

 </div>

 <div class="item">

    <a href="##"><img src="img/3.jpeg" alt=""></a>

 </div></div>

(3)制作切换跳转按钮。这里只需要在与 carusel-inner 同级的区域使用 ol 或是 ul 元素指定与图片数量一样多的 li 标签就可以。这里需要特别注意 data-slide-to 属性。它用来传递某个帧的下标,比如 data-slide-to="1",可以直接跳转到这个指定的第二个图片。因为下标从0开始计算的,同样定义在轮播图计数器的每个 li 上。

  <ol class="carousel-indicators">

 <li class="active" data-target="#slidershow" data-slide-to="0"></li>

 <li data-target="#slidershow" data-slide-to="1"></li>

 <li data-target="#slidershow" data-slide-to="2"></li>

  </ol>

(4)播放顺序是在 Carousel 中通过 carousel-control样式配合 left 和 right 来实现。其中left表示向前播放,right表示向后播放。在设置播放顺序的时候,我们利用了“<”“>”符号,来表示切换。这里引用了来自 Glyphicon Halflings 的字体图标。代码如下:

<a class="left carousel-control" href="#slidershow" role="button">

    <span class="glyphicon glyphicon-chevron-left"></span>

 </a>

 <a class="right carousel-control" href="#slidershow" role="button">

    <span class="glyphicon glyphicon-chevron-right"></span>

 </a>

这里还可以用js代码来实现这个功能,代码如下:

<script type="text/javascript">

$(function(){

$("#slidershow").carousel({

interval:1000

});

$("#slidershow a.left").click(function(){

$(".carousel").carousel("prev");

});

$("#slidershow a.right").click(function(){

$(".carousel").carousel("next");

});

});

</script>

效果如下:

图1 效果图

3 总结

按理说用bootstrap写轮播图,应该是比较简单的。但是在写作过程中,因为自己的粗心,犯了一个十分特别简单的问题。在引入图片的时候,把图片文件后缀Jpeg,写成了jpg。就因为这个图片一直没有办法显示,浪费的很多时间检查修改。所以说在平时的作业过程中,一定要小心谨慎。

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java|“ Java”来爬取小说章节

    在上一篇Java|使用WebMagic进行电话爬取“的文章里就已经介绍了如何主要使用Pageprocessor去爬取电话号码,接下来将要学习到的是去爬取起点中文...

    算法与编程之美
  • 网页|扇形菜单—你不get一下吗?

    扇形菜单,就是将导航菜单制作成扇形的形状。简单来说就是通过点击一个按钮,弹出一个以这个按钮为圆心的扇形按钮菜单,(可以根据需要添加按钮个数)。可以通过改变一下半...

    算法与编程之美
  • 网页|css中的匹配问题

    众所周知在写css的时候,会根据html中类的定义或者id的定义来写相应的css代码。给不同的类定义不同的样式,当然为了能够少写一些代码,大家就会在css中引用...

    算法与编程之美
  • Reactjs 入门基础(一)

    实例中我们引入了三个库: react.min.js 、react-dom.min.js 和 browser.min.js:   1,react.min.js ...

    用户1197315
  • 分布式之Zookeeper一(分布式锁与Zookeeper集群)

    说到分布式开发,不得不说的就是zookeeper了;zookeeper官网说到Apache ZooKeeper致力于开发和维护可实现高度可靠的分布式协调的开源服...

    Java_老男孩
  • Kotlin入门(21)活动页面的跳转处理

    Activity的活动页面跳转是App最常用的功能之一,在前几章的demo源码中便多次见到了,常常是点击界面上的某个按钮,然后跳转到与之对应的下一个页面。对于A...

    用户4464237
  • 推荐几个不追踪隐私的搜索引擎

    毫无疑问,在中文搜索领域,「百度」独占鳌头。但众所周知,至少在目前,与「百度」这个浪漫的命名截然相反的是,百度是个口碑极其糟糕的产品。但是对于大多数的用户,彻底...

    iMike
  • vue.js中的computed计算属性如何传递参数

    笔者参考博客https://blog.csdn.net/qq_35775675/article/details/82288571的做法后,的确成功了 。

    acoolgiser
  • 记在阿里CDN上设置腾讯云免费DV SSL证书后部分浏览器提示不被信任的解决方法

    今天使用腾讯云的免费DV SSL证书在阿里云CDN上部署,电脑上访问一切正常,但在手机使用UC浏览器提示证书已过期或不被信任,微信中访问直接空白。后来通过禁用C...

    TLingC
  • 「黑科技」你想过用脑电波给iPhone充电吗?

    镁客网

扫码关注云+社区

领取腾讯云代金券