js实现支持手机滑动切换的轮播图片效果实例

前端技术 2023/09/04 JavaScript

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法。分享给大家供大家参考。具体如下：

运行效果如下：

完整实例代码点击此处本站下载。

使用方法案例:

<script type=\"text/javascript\" src=\"../src/zepto.js\"></script>
<script type=\"text/javascript\" src=\"../src/carousel-image.js\"></script>
<script>
 $(\'.carousel-image\').CarouselImage({
  num :$(\'.carousel-num\')
});
</script>

或者requirejs：

<div class=\"carousel-image\">
<div>
 <a>
  <img src=\"http://www.yoursiteweb.com/images/1430073193462.jpg\"/>
 </a>
 <a>
  <img src=\"http://www.yoursiteweb.com/images/1430073252953.png\"/>
 </a>
 <a>
  <img src=\"http://www.yoursiteweb.com/images/1430073111420.jpg\"/>
 </a>
</div>
<div class=\"carousel-num\">
</div>
</div>
<script type=\"text/javascript\" src=\"../src/zepto.js\"></script>
<script type=\"text/javascript\" src=\"../src/require.js\"></script>
<script>
requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: \'../src\',
  paths: {
   $: \'zepto\'
  }
});
require([\'carousel-image\',\"$\"], function(CarouselImage,$) {
  var cs = new CarouselImage();
  cs.init({
   target:$(\'.carousel-image\'),
   num:$(\'.carousel-num\')
  });
});
</script>

API 属性、方法及回调：

target:
表示是在这个容器内的元素会触发事件,它应该有个子级的容器，方便动画的优化

num:
本意是以显示当前索引的数字表示，但现在用样式把数字隐藏了，如果要显示数字样式，可自行更改样式文件

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/9024

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案