css轮播图代码（轮播图代码）

你们好，最近小时发现有诸多的小伙伴们对于css轮播图代码，轮播图代码这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、首先我们需要建立一个项目，或者打开已有的项目，准备几张大小一样的图片。我们以3张为例子，准备了3张图片放到项目下的images文件夹。

2、我们在wxml 文件粘贴上以下代码。

3、<swiper indicator-dots="{{indicatorDots}}"

4、 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">

5、 <block wx:for="{{imgUrls}}">

6、 <swiper-item>

7、 <navigator url="{{item.link}}" hover-class="navigator-hover">

8、 <image src="{{item.url}}" class="slide-image" width="355" height="150"/>

9、 </navigator>

10、 </swiper-item>

11、 </block>

12、</swiper>

13、在JS文件的data粘贴上以下代码，红的边框里面的是点击跳转的路径。l绿色边框的是图片的路径。

14、imgUrls: [

15、 {

16、 link: '/pages/index/index',

17、 url: '/images/1.jpg'

18、 }, {

19、 link: '/pages/logs/logs',

20、 url: '/images/2.jpg'

21、 }, {

22、 link: '/pages/index/index',

23、 url: '/images/3.jpg'

24、 }

25、 ],

26、 indicatorDots: true, //小点

27、 autoplay: true, //是否自动轮播

28、 interval: 3000, //间隔时间

29、 duration: 3000, //滑动时间

30、我们都添加好了以后，保存一下，预览一下效果。图片有点变形。

31、我们在wxml的<image>标签添加一个

32、mode='aspectFit'，使图片保持比例。

33、这样就实现了图片轮播的效果，那么更多的效果，例如颜色，滑动时间等等，大家可以去开发者API查看。

以上就是轮播图代码这篇文章的一些介绍，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！