<!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. 关于requirejs

    24718-12042010 00001h6wzKLpfo3gmjJ8xoTPw5mQvY YA8vwka9tH!vibaUKS4FIDIkUfy!!f 3C"rQCIRbShpSlDcFT ...

  2. SSI指令

    1.SSI定义 SSI是英文Server Side Includes的缩写, 即“服务器端包含”或“服务器端嵌入”技术. SSI在HTML文件中,可以通过注释行调用的命令或指针,是一种基于服务器端的网 ...

  3. python3 爬虫

    保存当前cookie到本地 import urllib.request as ur import http.cookiejar as hc url='http://www.xxxx.com/admin ...

  4. espcms简约版的表单，提示页，搜索列表页

    模板/lib/form.html <script type="text/javascript" src="{%$rootdir%}js/My97DatePicker ...

  5. 设计模式--工厂模式Factory（创建型）

    工厂模式属于创建型模式,分为三类,简单工厂模式.工厂方法模式.抽象工厂模式. 一.简单工厂模式 在工厂中做判断,根据产品类型从而创造相应的产品,当增加新产品时需要修改工厂类. 例如: enum CTY ...

  6. js中数组连接concat()

    数组连接concat() concat() 方法用于连接两个或多个数组.此方法返回一个新数组,不改变原来的数组. 语法 arrayObject.concat(array1,array2,...,arr ...

  7. shane祝大家新年快乐

    后天就要回家过年了,明天好好准备一下,shane祝福大家新年快乐,呵呵.

  8. windo phone8.1 样式的基本使用（一）

    样式的基本使用(一) 当一个项目中有多个控件出现相同的属性设置,那么可以使用以下解决办法 方法一: <Page.Resources> <!--向资源字典中添加一个键为Buttongr ...

  9. 51nod1073(约瑟夫环)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1073 题意: 中文题诶~ 思路: 直接模拟的话O(n*k)的 ...

  10. PHP日期与时间

    时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp).Unix时间戳(Unix timestamp),或称Uni ...