让图片跳跃起来  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 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
js中!和!!的区别与用法
May 09 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
JS继承最简单的理解方式
Mar 31 Javascript
JavaScript 实现页面滚动动画
Apr 24 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP XML数据解析代码
2010/05/26 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
Django如何重置migration的几种情景
2021/02/24 Python
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
妇科医生自荐信
2013/11/05 职场文书
个人租房协议书
2014/11/28 职场文书
西柏坡导游词
2015/02/05 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js