让图片跳跃起来  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 loading加载效果实现代码
Nov 24 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
vuex存储token示例
Nov 11 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
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
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python实现猜数游戏
2020/03/27 Python
python属于软件吗
2020/06/18 Python
python如何查看安装了的模块
2020/06/23 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
微博营销计划书
2014/01/10 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
高中地理教学反思
2016/02/19 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书