slide.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Slide Show</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./dist/jsAnimate.js"></script>
</head>

<body>

  <div id="slide">
    <!--轮播图片slide images-->
    <img src="http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/03/43/7dc9f5f9f90a6f0d4226fd7a7d747753.jpg">
    <img src="http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/03/44/f07e17594190cbd41e8e63b2bbd31c21.jpg">
    <img src="http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/04/05/58034ac16316c164e36f17eaa9f6aff2.jpg">
  </div>
  <script type="text/javascript">
    /*轮播图插件，只需要一个div标签将所有img标签嵌套，然后再写一行js即可。可以根据浏览器窗口大小的改变做出自适应。
      轮播图css样式什么的完全不用管，js会识别里面的img数量并作出相应的样式处理。
      如果div里面只有一个img，那么不会有轮播图样式和效果，img宽度会占满div(相当于一张全屏大图)。
      *@method slice
      *@for jsAnimate
      *@param {object}

        方法的参数类型是对象，对象中可包含：
        1.根元素id, 
        2.间隔时间(图片自动切换的时间, 单位秒), 
        3.滚动速度时间(从原位置滚动到目标位置的时间, 单位秒), 
        4.是否有左右箭头, 
        5.是否有底部圆点, 
        6.是否自动轮播
        
      *@return {object}
        方法返回一个根元素对象
    */
    jsAnimate.slide({
      id: "slide",// 字符串类型，根元素id，该属性不可省略
      time: 3,// 数字类型，轮播时间，可省略，默认为3秒换一次图片
      speed: 0.3,// 数字类型，切换速度，可省略，默认为0.3秒图片切换完毕
      //noArrow: true,// 布尔类型，没有左右箭头，默认有
      //noBottom: true,// 布尔类型，没有底部圆点，默认有
      //noAutoSlide: true// 布尔类型，不自动轮播，默认轮播 
    })
  </script>

</body>

</html>