<!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. [Python] Python学习笔记之常用模块总结[持续更新...]

    作为一种极其简单的编程语言,Python目前成为了最炙手可热的几种语言之一.它不仅简单易学,而且它还为用户提供了各种各样的模块,功能强大,无所不能.有利必有弊,学习Python同样有困扰,其中之一就是 ...

  2. 实用框架（iframe）代码

    <iframe src="http://www.baidu.com" marginwidth="0" marginheight="0" ...

  3. 利用session_set_save_handler()函数将session保存到MySQL数据库中

    PHP保存session默认的是采用的文件的方式来保存的,这仅仅在文件的空间开销很小的windows上是可以采用的,但是如果我们采用uinx或者是liux上的文件系统的时候,这样的文件系统的文件空间开 ...

  4. Linux C 字符串输出函数 puts()、fputs()、printf() 详解

    一.puts() 函数详解 puts()函数用来向 标准输出设备 (屏幕)写字符串并换行,调用格式为: puts(s); 其中s为字符串变量(字符串数组名或字符串指针). puts()函数的作用与语 ...

  5. ReactiveCocoa源码拆分解析(六)

    (整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) RAC为了实现优雅的信号绑定,可谓使尽浑身解数,不仅 ...

  6. git 简单使用

    创建新分支:git branch branchName 切换到新分支:git checkout branchName 然后 ,上面两个命令也可以合成为一个命令: git checkout -b bra ...

  7. word20161207

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

  8. 将字符串转换成JSON对象

    import net.sf.json.*; JSONObject jsStr = JSONObject.fromObject(params); //将字符串{"id":1} int ...

  9. css3 transition

    <html>   <head lang="en">   <meta charset="UTF-8">   <title ...

  10. jquery input change事件

    input输入框的change事件,要在input失去焦点的时候才会触发 $('input[name=myInput]').change(function() { ... }); 在输入框内容变化的时 ...