让图片跳跃起来  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 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
js实现转动骰子模型
Oct 24 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 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
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
php实现留言板功能
2017/03/05 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
js常用DOM方法详解
2017/02/04 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
技校毕业生自荐信
2014/06/03 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
会议通知
2015/04/15 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python