HTML代码:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Carousel</title>
  6.   </head>
  7.   <body>
  8.     <div class="container">
  9.       <div id="list" style="left:-500px;">
  10.         <img src="../image5" alt="5">
  11.         <img src="../image1" alt="1">
  12.         <img src="../image2" alt="2">
  13.         <img src="../image3" alt="3">
  14.         <img src="../image4" alt="4">
  15.         <img src="../image5" alt="5">
  16.         <img src="../image1" alt="1">
  17.       </div>
  18.       <div id="submit">
  19.         <a href="javascript:;" id="prev">>></a>
  20.         <a href="javascript:;" id="next"><<</a>
  21.       </div>
  22.  
  23.       <!-- 指示圆点 -->
  24.       <div id="button">
  25.         <div class="on"></div>
  26.         <div></div>
  27.         <div></div>
  28.         <div></div>
  29.         <div></div>
  30.       </div>
  31.     </div>
  32.   </body>
  33. </html>

CSS代码：

  1.       *{margin:0px; padding:0px;}
  2.       #container{height:330px; width:500px; position:relative; overflow:hidden; border:3px solid #ccc; margin:0 auto;}
  3.       #list{width:3500px; height:310px; position:absolute;}
  4.       #list img{height:310px; width:500px; float:right;}
  5.       #submit{position:absolute; top:150px; width:500px; color:red; z-index:}
  6.       #submit a{font-size:25px; font-weight:; color:#ccc; opacity:0.3; text-decoration:none;}
  7.       #container:hover a{opacity:0.8;}
  8.       #next{float:right;}
  9.       #button{position:absolute; top:315px; left:220px;}
  10.       #button div{height:10px; width:10px; border-radius:50%; border:1px solid #ccc; float:left;}
  11.       #button .on{background-color:yellow;}

JavaScript代码：

  1.         window.onload = function ()
  2.         {
  3.           var container = document.getElementById('container');
  4.           var list = document.getElementById('list');
  5.           var buttons = document.getElementById('button').getElementsByTagName('div');
  6.           var index = 1;
  7.           var next = document.getElementById('next');
  8.           var prev = document.getElementById('prev');
  9.  
  10.           // 指示圆点
  11.           function showTab ()
  12.           {
  13.             for (var i = 0; i < buttons.length; i ++)
  14.             {
  15.               if (buttons[i].className = 'on')
  16.               {
  17.                 buttons[i].className = '';
  18.               }
  19.  
  20.               buttons[index - 1].className = 'on';
  21.             }
  22.           }
  23.  
  24.           // 定义动画方法
  25.           function animate (offset)
  26.           {
  27.             var newLeft = parseInt(list.style.left) + offset;
  28.             list.style.left = newLeft + 'px';
  29.             if (newLeft > -500)
  30.             {
  31.               list.style.left = -2500 + 'px';
  32.             }
  33.             if (newLeft < -2500)
  34.             {
  35.               list.style.left = -500 + 'px';
  36.             }
  37.           }
  38.  
  39.           // 下一页点击
  40.           next.onclick = function ()
  41.           {
  42.             // if (index == 5)
  43.             // {
  44.             //   index = 1;
  45.             // } else {
  46.             //   index +=1;
  47.             // }
  48.             // 这里可以用到三元运算符
  49.             index==5?index=1 : index+=1;
  50.             showTab();
  51.             animate(-500);
  52.           }
  53.  
  54.           prev.onclick = function ()
  55.           {
  56.             index==1?index=5 : index-=1;
  57.             showTab();
  58.             animate(+500);
  59.           }
  60.         }

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. Error:Error converting bytecode to dex: Cause: com.android.dex.DexException: Multiple dex files define Lcom/google/android/gms/internal/adp;

    Q:版本号不对,广告插件的版本号和项目中用的版本号不一致 A:adsplugins的build gradle里面用的版本号是10.0.1,修改app的build gradle 的google类都改成1 ...

  2. es6学习笔记--字符串&数值&数组&函数&对象的扩展

    这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...

  3. WordPress文章首行缩进

    WordPress后台编辑文章的时候会自动删除多余的空格,也就是说,你在后台编辑文章的时候添加的一些空格和换行在前台都是看不见的,都是被WordPress忽略了的,今天就讲讲怎么给所有文章添加首行缩进 ...

  4. Defraggler磁盘碎片整理工具，让你的电脑读写速度更快

    相信大家都听说过磁盘碎片整理吧,所谓磁盘碎片,通俗的来说,就是指计算机中的各种文件最开始在磁盘中存储的时候地址都是连在一起的,但是随着文件 的多次读写,或者说多次的移动复制等操作,这些文件在磁盘中的地 ...

  5. segment fault异常及常见定位手段

    问题背景 最近boot中遇到个用户态程序的segment fault异常,除了一句"Segment fault"打印外无其他任何打印.该问题复现概率较低,定位起来比较棘手.我们的b ...

  6. 部署wcf出现的问题与解决方法

    我将本机作为服务器开发时,没出什么问题,将wcf服务端寄缩到另一台电脑上时,出现了一些问题,这里总结下: 1.wcf服务器和另一个网站应用出问题 服务器的iis上有一个网站应用,当我将wcf服务寄缩到 ...

  7. Linux系统命令归纳

    常规操作命令: # netstat -atunpl |egrep "mysql|nginx"# vimdiff php.ini*# runlevel# rpm -e httpd - ...

  8. 《Linux命令行与shell脚本编程大全》- 读书笔记3 - 理解shell

    当用户登录终端的时候,通常会启动一个默认的交互式shell.系统究竟启动哪个shell,这取决于用户配置.一般这个shell都是/bin/shell.默认的系统shell(/bin/sh)用于系统sh ...

  9. Go语言学习1

    1.go标示符:非空字母或者数字串,第一个必须是字母,不能为关键字,可以是下划线. 2.go关键字: break,default,func,interface,select, case,defer,g ...

  10. vue中$on与$emit的实际应用

    $on常用于监听自定义事件,触发后可传入参数 //监听event1事件 vm.$on('event1',function(msg){ console.log(msg) }) //触发event1自定义 ...