<!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;

            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;

            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;

            border-right: 5px solid;

            border-top: 5px solid;

            -webkit-transform: rotate(45deg);

            transform: rotate(45deg);

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

      }

    </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>

      </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");

      function tab(){

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

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

                        btnList[j].className="";

                  }

                  btnList[index].className="active";

      }

      function next() {

            index++;

            if(index > btnList.length - 1) {

                  index = 0;

            }

            tab();

      }

      function prev() {

            index--;

            if(index < 0) {

                  index = btnList.length - 1;

            }

            tab();

      }

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

            btnList[i].index=i;

            btnList[i].onclick =function(){

                index=this.index;

                tab();

            }

      }

      var index=0;

      function xunhuan(){

           index++;

               if(index>btnList.length -1){

                  index=0;

               }

           tab();

      }

     var  timer =setInterval(xunhuan,2000);

      inner.onmouseover =function(){

          clearInterval(timer);

      }

      inner.onmouseout =function(){

        timer = setInterval(xunhuan,2000);

      }

     //下一张

      nextBtn.onclick = function() {

            clearInterval(timer);

            next();

            timer = setInterval(next,2000);

      }

      //上一张

      prevBtn.onclick = function() {

            clearInterval(timer);

            prev();

            timer = setInterval(next,2000);

      }

    </script>

</body>

</html>

JavaScript、tabel切换完整版—自动切换—鼠标移入停止-移开运行的更多相关文章

  1. HTML5+JavaScript动画基础 完整版 中文pdf扫描版

    <HTML5+JavaScript动画基础>包括了基础知识.基础动画.高级动画.3D动画和其他技术5大部分,分别介绍了动画的基本概念.动画的JavaScript基础.动画中的三角学.渲染技 ...

  2. ViewPager的基本使用--可左右循环切换也可自动切换

    ViewPager也算是Android自带的常用控件之一,但是有可能会无法直接调用,所以只需要将工程目录里/libs/android-support-v4.jar该jarAdd to Build Pa ...

  3. jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js写当鼠标悬浮及移开出现背景变化

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

  5. javascript实现图片切换、自动走、鼠标移入会停止，移出继续走

    要实现以上效果并不难,把功能分开一步一步来实现就变得简单了,录制动态图不流畅,看代码意会吧! <!doctype html> <html lang="en"> ...

  6. 【温故而知新-Javascript】图片效果（图像震动效果、闪烁效果、自动切换图像）

    1.当鼠标指针经过图像时图像震动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  8. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. javascript实现自动切换焦点功能学习

    当用户在表单中填写完当前字段后,能否自动将焦点跳转到下一个字段以方便用户输入? 为了增强易用性,加快数据输入的速度,可以在前一个文本框中的字符达到一定的设置的字符长度后(比如电话号码,身份证号等),用 ...

随机推荐

  1. thinkphp3.2跨控制器调用其他模块的方法

    thinphp中前台后台都有互相调用方法,这样可以省去重复内容. 1 2 $hello = new \Admin\Common\Fun\hello(); $hello->hehe(); 调用其他 ...

  2. DAY6 处理http头，格式化输出

    <html> <head> <script> function insertStr(str1,n,str2){ if(str1.length<n){ retu ...

  3. javascript判断图片是否加载完成方法整理

    有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载 ...

  4. jquery 用attr修改src 淡入淡出

    $("#wanwan").animate({ opacity: 'toggle' }, "slow", null, function () { $(" ...

  5. word20161207

    DHCPRELEASE, DHCP release message / DHCP 释放消息 DHCPREQUEST, DHCP request message / DHCP 请求消息 dial 拨号位 ...

  6. jq 实现无限级地区联动 样式为bootstrap

    HTML 部分 <div class="row" style="margin:100px auto;"> <form method=" ...

  7. difference bewteen *args and **args in python?

    It's also worth noting that you can use * and ** when calling functions as well. This is a shortcut ...

  8. 【DevOps】DevOps成功的八大炫酷工具

    为自动化和分析所设计的软件及服务正加速devops改革的步伐,本文为你盘点了Devops成功的八大炫酷工具 Devops凭借其连接弥合开发与运营团队的能力正在各个行业呈现席卷之势.开发人员和运营人员历 ...

  9. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  10. Huffman Tree

    哈夫曼(Huffman)树又称最优二叉树.它是一种带权路径长度最短的树,应用非常广泛. 关于Huffman Tree会涉及到下面的一些概念: 1. 路径和路径长度路径是指在树中从一个结点到另一个结点所 ...