让图片跳跃起来  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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
webpack的pitching loader详解
Sep 23 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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通过header实现文本文件下载的代码
2010/08/08 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python实现的汉诺塔算法示例
2019/10/23 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
python如何支持并发方法详解
2020/07/25 Python
社区活动邀请函范文
2014/01/29 职场文书
重阳节登山活动方案
2014/02/03 职场文书
客服部班长工作责任制
2014/02/25 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
导游词之湖北武当山
2019/09/23 职场文书