<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{

        margin: 0;

        padding: 0;

    }

      .wrap{

          width: 510px;

          margin: 0 auto;

          overflow: hidden;

            position: relative;

      }

      .caktye{

          width: 9999px;

          overflow: hidden;

          position: relative;

          left: 0;

      }

      .main{

          text-align: center;

            position: absolute;

            bottom: 10px;

            /*border: 1px solid red;*/

            left: 35%;

      }

      .main button{

          width: 25px;

            height: 25px;

            text-align: center;

            line-height: 25px;

            border-radius: 25px;

            display: inline-block;

            border: none;

      }

      .active{

          background-color: yellow;

      }

      .caktye a{

          float: left;

      }

      .caktye img {

            display: block;

            width:510px;

        }

      #prevBtn{

               display: block;

               position: absolute;

               left: 5px;

                bottom: 45%;

            width: 15px;

            height: 15px;

            /*overflow: hidden;*/

            border-left: 5px solid ;

            border-top: 5px solid ;

             border-color: rgba(255,255,255,0.5);

            -webkit-transform: rotate(45deg);

            transform: rotate(-45deg);

      }

      #nextBtn{

            display: block;

            position: absolute;

            right: 5px;

            bottom: 45%;

            width: 15px;

            height: 15px;

            /*overflow: hidden;*/

            border-right: 5px solid;

            border-top: 5px solid;

            -webkit-transform: rotate(45deg);

            transform: rotate(45deg);

            border-color: rgba(255,255,255,0.5);

            /*background-color: rgba(255,255,255,0.8);*/

      }

    </style>

</head>

<body>

    <div class="wrap">

      <div class="caktye" id="inner">

        <a href="###"><img src="img/1.jpg"></a>

        <a href="###"><img src="img/2.jpg"></a>

        <a href="###"><img src="img/3.jpg"></a>

        <a href="###"><img src="img/4.jpg"></a>

        <a href="###"><img src="img/5.jpg"></a>

            <a href="###"><img src="img/1.jpg"></a>

      </div>

        <div class="main">

            <button class="active">1</button>

            <button>2</button>

            <button>3</button>

            <button>4</button>

            <button>5</button>

      </div>

      <div>

            <a href="###" id="prevBtn"></a>

            <a href="###" id="nextBtn"></a>

      </div>

    </div>

    <script type="text/javascript">

      var innerList = document.getElementById("inner");

      var btnList = document.getElementsByTagName("button");

      var perWidth =  inner.children[0].offsetWidth;

      var prevBtn = document.getElementById("prevBtn");

      var nextBtn = document.getElementById("nextBtn");

      // var imgList = inner.getElementsByTagName("img");

      // var perWidth = imgList[0].offsetWidth;

      var timer = 0;

      var timer1 = 0;

      var index =0;

      var runFlag = true; //设置一个动画是否走完的标志位

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

            btnList[i].index = i;

            btnList[i].onclick = function() {

                  index = this.index;

                  tab();

            }

      }

      function tab() {

            var start = inner.offsetLeft;

            var end = - perWidth * index;

            var change = end - start;

            var t = 0;

            var maxT = 30;

            clearInterval(timer1);

            timer1 = setInterval(function() {

                  t++;

                  if(t >= maxT) {

                        clearInterval(timer1);

                        // alert("停下来了");

                        runFlag = true;

                  }

                  inner.style.left = change/maxT * t + start + "px";

                  if(index == btnList.length && t >= maxT) {

                        inner.style.left = 0;

                  }

            },30)

            // inner.style.left =  - perWidth * index + "px";

            for(var j = 0; j < btnList.length; j++) {

                  btnList[j].className = "";

            }

            if(index >= btnList.length) {

                  btnList[0].className = "active";

            }else {

                  btnList[index].className = "active";

            }

      }

       function xunhuan(){

             index++;

                  if(index>btnList.length){

                  index=1;

                  }

                  // inner.style.left =  - perWidth * index + "px";

             tab();

      }

     var  timer =setInterval(xunhuan,5000);

      inner.onmouseover =function(){

      clearInterval(timer);

      }

      inner.onmouseout =function(){

        timer = setInterval(xunhuan,5000);

      }

      function next() {

            index++;

            if(index > btnList.length) {

                  index = 1;

            }

            tab();

      }

      function prev() {

            index--;

            if(index < 0 ) {

                  index = btnList.length - 1;

                  inner.style.left = - btnList.length * perWidth + "px";

                  console.log(index);

            }

            tab();

      }

      //下一张

      nextBtn.onclick = function() {

            clearInterval(timer);

            if(runFlag) {

                  next();

            }

            runFlag = false;

      }

      //上一张

      prevBtn.onclick = function() {

            clearInterval(timer);

            if(runFlag) {

                  prev();

            }

            runFlag = false;

      }

    </script>

</body>

</html>

JavaScript-table+大图滚动的更多相关文章

  1. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

  2. jQ版大图滚动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 一个jQ版大图滚动

    难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正: 运作环境win7,代码编辑器是:sublime; 我把源码复制了一下, <!do ...

  4. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  5. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  6. 使用JavaScript实现新闻滚动效果

    最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...

  7. Table上下滚动

    <table> <tr> <td> <div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --& ...

  8. ul 仿 table 循环滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. javascript实现图片滚动

    闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...

  10. [转]JavaScript实现 页面滚动图片加载

    本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...

随机推荐

  1. PHP输出XML文件函数

    PHP输出XML文件函数 function xml_out($content, $charset = 'utf-8') { @header("Expires: -1"); @hea ...

  2. 进阶系列一【绝对干货】---SQL语句执行效率优化

    1.尽量适用联接查询来取代子查询 2.如果要用子查询,用EXISTS替代IN.用NOT EXISTS替代NOT IN,因为EXISTS引入的子查询只是测试是否存在符合子查询中指定条件的行,效率较高.无 ...

  3. Codeforces VK CUP 2015 D. Closest Equals(线段树+扫描线)

    题目链接:http://codeforces.com/contest/522/problem/D 题目大意:  给你一个长度为n的序列,然后有m次查询,每次查询输入一个区间[li,lj],对于每一个查 ...

  4. python , angular js 学习记录【2】

    1.不同scope之间的通信 (1)无父子关系的scope通信: 在需要操作的scope里面定义一个事件,名称为delete_host,参数为data $rootScope.$on('delete_h ...

  5. 解决 iOS 9.1 微信内置浏览器中html audio 不能自动播放的问题

    使用微信现在提供过的微信js-sdk 在ready中进行播放便可. 首先引用js : <script src="http://res.wx.qq.com/open/js/jweixin ...

  6. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  7. Python 开发轻量级爬虫08

    Python 开发轻量级爬虫 (imooc总结08--爬虫实例--分析目标) 怎么开发一个爬虫?开发一个爬虫包含哪些步骤呢? 1.确定要抓取得目标,即抓取哪些网站的哪些网页的哪部分数据. 本实例确定抓 ...

  8. jquery图片轮播

    <html> <head> <title>position</title> <style type="text/css"> ...

  9. javaSE基础02

    javaSE基础02 一.javac命令和java命令做什么事情? javac:负责编译,当执行javac时,会启动java的编译程序,对指定扩展名的.java文件进行编译,生成了jvm可以识别的字节 ...

  10. C语言指针类型

    1:只要是指针类型,不管是几级指针[带几个*],其宽度都是4字节 2:任何数据类型[包括自己定义的结构体]前面都能加*号,表示该数据类型的一个指针 3:由于是386处理器,其数据处理的宽度都是四个字节 ...