让图片跳跃起来  javascript图片轮播特效


Posted in Javascript onFebruary 16, 2016

图片轮播效果,在现在的网站的首页,差不多是必备的效果显示. 所以我从三个方面来讲解这一效果的简单实现.

  • 图片跳动起来
  • 图片序列控制的实现
  • 前后按钮控制的实现

这篇文章来看图片按照间隔时间进行切换.

我们先把结构代码完成,这个我就不做详细的讲解了.看效果

让图片跳跃起来  javascript图片轮播特效

代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul,ol,li{
     list-style: none;
      margin: 0;
      padding: 0;
    }
    #slider{
      width: 800px;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
    }
    #slider ul{
      width: 2400px;
      position: relative;
    }
    #slider ul:after{
      content: " ";
      width: 0;
      height: 0;
      display: block;
    }
    #slider ul li{
      float: left;
      width: 800px;
      height: 300px;
      overflow: hidden;
    }
    #slider ul li img{
      width: 100%;
    }
    #slider ol{
      position: absolute;
      bottom: 10px;
      left: 46%;
    }
    #slider ol li{
      display: inline-block;
    }
    #slider ol li a{
      display: inline-block;
      padding:4px 8px;
      border-radius:15px;
      background-color: #000;
      color: #fff;
    }
    #slider .prev, #slider .next{
      display: inline-block;
      position: absolute;
      top: 49%;
      background-color: #000;
      opacity: 0.6;
      color: #fff;
      padding: 3px;
    }
    #slider .prev{
      left: 10px;
    }
    #slider .next{
      right: 10px;
    }
  </style>
</head>
<body>
  
  <div id="slider">
    <ul>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
    </ul>
    <ol>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
    </ol>
    <a href="#">上一张</a>
    <a href="#">下一张</a>
  </div>
</body>
</html>

好的,现在我们来通过JS控制图片的跳转.

首先我们需要找到图片所在的位置,这里我们是通过ul来进行布局的所以首先得找到UL下的LI的数目

接着让图片一张一张的展示,我们使用了视窗的模式,就是遮罩层的模式.#slider是一个视窗,ul是视窗外的景色,而ul得景色是横向排版的

然后就是让外面的景色显示为视窗的大小,也就是让每一张图片作为每一次的视窗景色,这里就是控制图片的大小要与视窗同等大小.

上面讲解的是一个概念,也就是布局的处理,下面我们JS的控制了,要实现图片间隔的显示不同.我们就需要用到JS的setInterval或者setTimeout.这里我们使用setInterval(因为这个用起来方便.)

每跳转一次,我们控制的是UL的position的left,这样就可以让ul下的景色,在每一次都是显示不一样,而这个left是根据视窗的宽度来决定,第一张left当然是-800 * 0 ,第二种就是 -800*1,第三种是-800*2...依次类推.那我们就可以得出下面的代码

<script>
   (function(){
     var slider = document.getElementById("slider");
     var imgul = slider.getElementsByTagName("ul")[0];
     var imglis = imgul.getElementsByTagName("li");
     var len = imglis.length;
     var index = 0;
     setInterval(function(){
       if(index >= len){
         index = 0;
       }
        imgul.style.left = - (800 * index) + "px";
        index++;
     },2000);
   })();
 </script>

JS代码这样看起来就很简单了. 我这里是设置2秒跳转依次,然后跳转的次数大于等于图片的数目后,让其返回到第一张图片.

让图片跳跃起来  javascript图片轮播特效

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

Javascript 相关文章推荐
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 #Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 #Javascript
javascript每日必学之运算符
Feb 16 #Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 #Javascript
javascript每日必学之基础入门
Feb 16 #Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 #Javascript
js实现异步循环实现代码
Feb 16 #Javascript
You might like
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Django中的cookie和session
2019/08/27 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python学习之time模块的基本使用
2021/01/17 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
EJB timer的种类
2014/10/28 面试题
企业军训感言
2014/02/08 职场文书
环境整治工作方案
2014/05/18 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2015年党性分析材料
2014/12/19 职场文书
举起手来观后感
2015/06/09 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书