让图片跳跃起来  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与其它库冲突的解决方法
Jun 25 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
小程序实现按下录音松开识别语音
Nov 22 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 Memcache 中实现消息队列
2009/11/24 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
js表单验证实例讲解
2016/03/31 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
vue 动态创建组件的两种方法
2020/12/31 Vue.js
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python File readlines() 使用方法
2018/03/19 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
详解Python 最短匹配模式
2020/07/29 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
青春励志演讲稿范文
2014/08/25 职场文书
三潭印月的导游词
2015/02/12 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
Python3的进程和线程你了解吗
2022/03/16 Python
讲解Python实例练习逆序输出字符串
2022/05/06 Python