您现在的位置是:首页 > 随笔小记 > 小项目

最简单轮播图

  • 小项目
  • 2018-12-02
  • 人已阅读
简介读《细说ajax与jquery》解释最简单轮播图
展示链接:直隐直现的轮播图

源码展示:
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>基础动画</title>
  <script src="js/jquery-3.1.1.min.js"></script>
  <link href="css/01.css" rel="stylesheet" type="text/css">
  </head>
  <body>
  <h1>直隐直现的轮播图</h1>
  <img src="images/1.jpg">
  <img src="images/2.jpg" style="display:none">
  <img src="images/3.jpg" style="display:none">
  <img src="images/4.jpg" style="display:none">
  </body>
  </html>
  <script>
  var i = 0; //定义帧数的变量
  var len = $("img").length - 1; //判断执行方向
  setInterval(function(){
  if(i++%(2*len) < len){
  $("img:visible").hide().next().show();
  }else{
  $("img:visible").hide().prev().show();
  }
  },1000);
  </script>

解释:1、使用jquery首先调用js包:2、使用4张图片,叠加一起展示其中一张图片其他隐藏:3、设计循环展示条件要求,从头到尾在从未到头。

本例子只用最简单html 和css jquery  实现轮播图循环效果,简单方便,适合出学制学习使用。




著作权归作者所有。 
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:付博瀚
来源:付博瀚个人博客
链接: https://www.fubohan.com/

上一篇:HTML5 3D立体图片相册

下一篇:返回列表

文章评论

Top