让图片跳跃起来  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事件与函数的使用介绍
Sep 29 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 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&amp;&amp;mysql)六
2006/10/09 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python过滤序列元素的方法
2020/07/31 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
新闻编辑自荐信
2013/11/03 职场文书
医院党员公开承诺书
2014/08/30 职场文书
孩子教育的心得体会
2014/09/01 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript