<!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. C和指针 第五章 习题

    下列输出的值: #include <stdio.h> int func(){ static int count = 1; return ++count; } int main() { in ...

  2. css中为了清除浮动经常用到的after样式

    .cf:after { display: block; visibility: hidden; width:; height:; line-height:; font-size:; clear: bo ...

  3. hihoCoder 1196 高斯消元·二

    Description 一个黑白网格,点一次会改变这个以及与其连通的其他方格的颜色,求最少点击次数使得所有全部变成黑色. Sol 高斯消元解异或方程组. 先建立一个方程组. \(x_i\) 表示这个点 ...

  4. appCan uexLocation 定位功能

    js的引用: <script src="../js/zy_control.js"></script> <script src="../js/ ...

  5. jquery 控件赋值

    input 文本框赋值$("#id").attr("赋值"); input 文本框清空$("#id").attr("") ...

  6. HTML中图像代替提交按钮

    1. 用图像代替提交按钮 当只有一个提交按钮的时候 ,可以简单的实现,不用添加事件函数,代码是: <input type = "image"' name = ".. ...

  7. bzoj3439 trie+可持久化线段树

    挺好想的 trie建树后,按dfn序建可持久化 注意:计数变量多的题目一定要注意检查会不会用的时候搞混了 #include <cstdio> #include <cstdlib> ...

  8. js脚本语言

    alert(): 输出 字符串 转成整数 parseint(字符串):运算符与表达式% 取余 aler(10%2)余0 逻辑运算符&&并 ||或 !非 判断条件比较运算符== 等于 ! ...

  9. js冒泡排序

    今天面试了家公司,最后要写个js的简单数组排序,很久都写不出来,好尴尬,随着语言的发展,这些简单方法越来越不被重视了... <html> <head> <script t ...

  10. poj 3253 Fence Repair

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 42979   Accepted: 13999 De ...