<!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. 什么是Reactor模式，或者叫反应器模式

    Reactor这个词译成汉语还真没有什么合适的,很多地方叫反应器模式,但更多好像就直接叫reactor模式了,其实我觉着叫应答者模式更好理解一些.通过了解,这个模式更像一个侍卫,一直在等待你的召唤,或 ...

  2. SqlServer数据库大型应用解决方案总结

    随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互联网应用,每天百万级甚至上亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的问题. 一 ...

  3. HTML头部

    1.文档声明 html5的声明类型为  <!DOCTYPE html> 2.head部分 2.1 <title></title> 2.2 <base href ...

  4. 【Maven】Eclipse安装Maven插件后导致Eclipse启动出错

    本文纯属复制粘贴:具体请参照原文: Eclipse安装Maven插件后,Eclipse启动问题:Maven Integration for Eclipse JDK Warning.  解决方法: 1. ...

  5. jstl catch if choose标签

    catch标签: catch标签用来处理异常 属性: * var :用来出现异常保存到的变量. 代码: <c:catch var="e"> <% int i = ...

  6. [转]TextView maxWidth maxLength maxEms 区别

    maxWidth=”80dp” 限制TextView最大宽度.必须与layout_width=”wrap_content”搭配使用,当指定layout_width为其他值时,maxWidth会失效. ...

  7. yii2.0的分页和排序

    //排序 $sort = new Sort([ 'attributes' => [ 'age' => [ 'asc' => ['age' => SORT_ASC], 'desc ...

  8. NEFU 561 方块计算

    题目链接 简单搜索题 #include <cstdio> #include <iostream> #include <cstring> using namespac ...

  9. NSLOOKUP命令使用

    nslooup命令,可以用来检测dns服务器是否可用,以及域名对应的真实ip,在一些网络dns不稳定的情况下可以使用,用来正确访问网站. Microsoft Windows [版本 6.1.7601] ...

  10. 分页显示中关于"序号"的问题

    项目开发中要求列表显示要明显看到总条目数,所以就要求序号从1开始. 如下为从1开始的序号展示: <s:iterator value="#request.pageView.records ...