HTML代码:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Carousel</title>

  </head>

  <body>

    <div class="container">

      <div id="list" style="left:-500px;">

        <img src="../image5" alt="5">

        <img src="../image1" alt="1">

        <img src="../image2" alt="2">

        <img src="../image3" alt="3">

        <img src="../image4" alt="4">

        <img src="../image5" alt="5">

        <img src="../image1" alt="1">

      </div>

      <div id="submit">

        <a href="javascript:;" id="prev">>></a>

        <a href="javascript:;" id="next"><<</a>

      </div>

      <!-- 指示圆点 -->

      <div id="button">

        <div class="on"></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

      </div>

    </div>

  </body>

</html>

CSS代码：

      *{margin:0px; padding:0px;}

      #container{height:330px; width:500px; position:relative; overflow:hidden; border:3px solid #ccc; margin:0 auto;}

      #list{width:3500px; height:310px; position:absolute;}

      #list img{height:310px; width:500px; float:right;}

      #submit{position:absolute; top:150px; width:500px; color:red; z-index:}

      #submit a{font-size:25px; font-weight:; color:#ccc; opacity:0.3; text-decoration:none;}

      #container:hover a{opacity:0.8;}

      #next{float:right;}

      #button{position:absolute; top:315px; left:220px;}

      #button div{height:10px; width:10px; border-radius:50%; border:1px solid #ccc; float:left;}

      #button .on{background-color:yellow;}

JavaScript代码：

        window.onload = function ()

        {

          var container = document.getElementById('container');

          var list = document.getElementById('list');

          var buttons = document.getElementById('button').getElementsByTagName('div');

          var index = 1;

          var next = document.getElementById('next');

          var prev = document.getElementById('prev');

          // 指示圆点

          function showTab ()

          {

            for (var i = 0; i < buttons.length; i ++)

            {

              if (buttons[i].className = 'on')

              {

                buttons[i].className = '';

              }

              buttons[index - 1].className = 'on';

            }

          }

          // 定义动画方法

          function animate (offset)

          {

            var newLeft = parseInt(list.style.left) + offset;

            list.style.left = newLeft + 'px';

            if (newLeft > -500)

            {

              list.style.left = -2500 + 'px';

            }

            if (newLeft < -2500)

            {

              list.style.left = -500 + 'px';

            }

          }

          // 下一页点击

          next.onclick = function ()

          {

            // if (index == 5)

            // {

            //   index = 1;

            // } else {

            //   index +=1;

            // }

            // 这里可以用到三元运算符

            index==5?index=1 : index+=1;

            showTab();

            animate(-500);

          }

          prev.onclick = function ()

          {

            index==1?index=5 : index-=1;

            showTab();

            animate(+500);

          }

        }

JavaScript 轮播图实例的更多相关文章

  1. 前端基础功能，原生js实现轮播图实例教程

    轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...

  2. JavaScript 轮播图

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...

  3. 练习:javascript轮播图效果

    javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...

  4. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  5. JavaScript轮播图

    需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...

  6. 超详细的原生JavaScript轮播图（幻灯片）的制作

    本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...

  7. JavaScript 自适应轮播图

    代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 6_bootstrap之导航条|轮播图|排版|表单元素|分页

    8.导航条 BootStrap已经提供了完整的导航条实例,通常情况下,我们仅需进行简单修改即可使用. 帮助手册位置:组件-------导航条 9.轮播图 BootStrap已经提供了完整的轮播图实例, ...

  9. 原生JS的轮播图

    学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的.也实现了无缝切换.还有一点问题就是没有加上图片切换的时候的延 ...

随机推荐

  1. springboot如何测试打包部署

    有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元 ...

  2. 关于使用Ajax请求json数据，@RequestMapping返回中文乱码的几种解决办法

    一.问题描述: 使用ajax请求json数据的时候,无论如何返回的响应编码都是ISO-8859-1类型,因为统一都是utf-8编码,导致出现返回结果中文乱码情况. $.ajax({ type:&quo ...

  3. oracle 12c 安装指南（各种问题总结）

    下一学期要学习数据库的知识,趁着敲代码之余,安装著名的oracle来放松一下 1.首先从官网下载安装包http://www.oracle.com/technetwork/database/enterp ...

  4. 关于Android SDK Manager更新速度慢的解决方法

    因为我的C盘比较小,android sdk安装在c盘那么他下载的东西也会默认在c盘.所以我选择安装在其他的盘.而且我发现android sdk manager可以开多个窗口,这样的话如果每个窗口都很慢 ...

  5. 【Unity与23种设计模式】适配器模式（Adapter）

    GoF中定义: "将一个类的接口转换成为客户端期待的类接口.适配器模式让原本接口不兼容的类能一起合作." 适配器模式与装饰模式有一定的相似之处 两者都是在着手解决C#不能多继承的问 ...

  6. webpack使用教程

    webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是 ...

  7. MySQL数据库学习三 数据库对象和基本操作

    3.1 数据库和数据对象 1. 系统数据库 information_schema:主要存储系统中的一些数据库对象信息,如用户列表信息.列信息.权限信息.字符集信息和分区信息等. performance ...

  8. 常见的链表排序（Java版）

    上篇博客中讲解了九大内部排序算法,部分算法还提供了代码实现,但是那些代码实现都是基于数组进行排序的,本篇博客就以链表排序实现几种常见的排序算法,以飨读者. 快速排序的链表实现 算法思想:对于一个链表, ...

  9. C语言中的atan和atan2

    本文内容为转载,是在阅读 RTKLIB源码时意识到的这个问题,原文地址为:https://www.cnblogs.com/dutlei/archive/2013/01/14/2860332.html ...

  10. 201621123062《java程序设计》第14周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 思维导图: 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的 ...