让图片跳跃起来 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程序设计有所帮助。

时间: 2016-02-15

原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0

JavaScript实现带标题的图片轮播特效

图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 CSS代码: <style type="text/css"> .body{ width:524px; border:solid 1px #666; margin-left:auto; margin-right:auto; } .bg{ background-color:#E0E0E0; height:20px; border-top:solid 1px #B4B4B4; } .number{

js图片轮播特效代码分享

本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图:                    -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co

js制作网站首页图片轮播特效代码

本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;

原生js轮播特效

作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF5;} *{ margin: 0; padding: 0; } .wrapper{ width: 400px; height: 300px; margin: 100px auto; } #lunbo{ position: relative; overflow: hidden; } #list{ position:

很棒的一组js图片轮播特效

大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢 先看一眼效果图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content{width:550px;height:300px;margin:50

轻松实现javascript图片轮播特效

本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a>&l

原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

基于javascript实现样式清新图片轮播特效

本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 <!DOCTYPE html> <html> <head lang="en"&g

js仿小米官网图片轮播特效

小米官网给我的感觉是大气.干净.很多特效的加入让人觉得耳目一新,big满满. 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个. 大致的感觉出来了,贴个图先: 通过前端神器chrom的F12观察小米官网的html代码,不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性进行元素的显示.隐藏. 截图如下(红框内的opacity属性): 好的,实现的手段知道了,那么页面布局先搞出来. <!DOCTYPE

JS仿hao123导航页面图片轮播效果

hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi

Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)

在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car

jquery图片轮播特效代码分享

本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=

jQuery带进度条全屏图片轮播特效代码分享

本文实例讲述了jQuery带进度条全屏图片轮播特效.分享给大家供大家参考.具体如下: jQuery实现的带进度条转接全屏图片轮播效果是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效代码,实现效果大气,简洁大方 运行效果图:                  -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: link rel="sty