要实现以上效果并不难，把功能分开一步一步来实现就变得简单了，录制动态图不流畅，看代码意会吧！

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {margin:0; padding: 0}

        button {

            width: 50px;

        }

        p {

            text-align: center;

        }

        .active {

            background-color: yellow;

        }

        #wrap {

            width:210px;

            overflow: hidden;

            margin:0 auto;

        }

        #inner {

            width:9999px;

            overflow: hidden;

            position: relative;

            left:0;

            transition: left 0.6s;

        }

        #inner a {

            float: left;

        }

        #inner img {

            display: block;

            width:210px;

        }

    </style>

</head>

<body>

    <div id="wrap">

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

            <a href="###"><img src="img/6.jpg"></a>

            <a href="###"><img src="img/7.jpg"></a>

            <a href="###"><img src="img/8.jpg"></a>

            <a href="###"><img src="img/9.jpg"></a>

            <a href="###"><img src="img/10.jpg"></a>

            <a href="###"><img src="img/11.jpg"></a>

            <a href="###"><img src="img/12.jpg"></a>

            <a href="###"><img src="img/13.jpg"></a>

            <a href="###"><img src="img/14.jpg"></a>

        </div>

    </div>

    <p>

        <button class="active">1</button>

        <button>2</button>

        <button>3</button>

        <button>4</button>

        <button>5</button>

        <button>6</button>

        <button>7</button>

        <button>8</button>

        <button>9</button>

        <button>10</button>

        <button>11</button>

        <button>12</button>

        <button>13</button>

        <button>14</button>

    </p>

    <script type="text/javascript">

    //1.找节点

    var buttonList = document.getElementsByTagName("button");

    var inner = document.getElementById("inner");

    var perWidth = inner.children[0].offsetWidth;

    function tab() {

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

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

            buttonList[j].className = "";

        }

        buttonList[index].className = "active";

    }

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

        buttonList[i].index = i;

        buttonList[i].onclick = function() {

            index = this.index;

            tab();

        }

    }

    var index = 0;

    function next() {

        index ++;

        if(index > buttonList.length - 1) {

            index = 0;

        }

        tab();

    }

    var timer = setInterval(next,1000);

    inner.onmouseover = function() {

        // alert("鼠标移入");

        clearInterval(timer);

    }

    inner.onmouseout = function() {

        timer = setInterval(next,1000);

    }

    </script>

</body>

</html>

以后还会继续添加些效果补充完整的....

javascript实现图片切换、自动走、鼠标移入会停止，移出继续走的更多相关文章

  1. JavaScript实现图片切换

    页面内容:一个按钮标签  一个Img标签 实现原理:通过修改Img标签的src属性,实现图片的切换 备注:代码中flag变量仅仅用作标记,也可以直接用Img标签的src属性进行判断,不过在判断时候不能 ...

  2. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  3. javascript实现双击网页自动滚动，单击滚动停止

    当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的.为了客人能够轻松的浏览,我们可以使用script代码实现网页的自动滚屏,当双击网页的时候,网页将会自动向 ...

  4. swiper轮播，添加鼠标移入事件停止轮播，移出重新开启轮播

    已测过无问题.

  5. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  6. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  7. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  8. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  9. JavaScript 图片广告自动与手动的切换

    ​1.代码 <html> <head>   <script type="text/javascript" src="jquery-1.8.j ...

随机推荐

  1. NSOperation的start与main，并发与非并发。

    http://blog.csdn.net/a2331046/article/details/52294006 在ios4以前,只有非并发的情况下,队列会为operation开启一个线程来执行.如果是并 ...

  2. Bootstrap<基础十一>字体图标(Glyphicons)

    字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本 ...

  3. 关于springMVC3.0基于注解方式的项目搭建

    前言:开发了几个月的AS3项目,感觉JAVA都用不太熟练了.刚好这几个抽的空,就把自己以前用过的Spring框架再搭一边, 并完整的记录下来 开发环境:tomcat + mysql+ java 1.所 ...

  4. DIV的不能包住子集解决办法

    在div的样式中加上:overflow:hidden,或者float:left或right

  5. visor 发布

    2014-4-10 visor.com.cn  的域名备案终于审核通过了.http://www.visor.com.cn 终于可以访问了,欢迎大家使用免费的线框图应用设计工具.

  6. [转]SPICE仿真软件基础(整理)

    现在常用的SPICE仿真软件为方便用户使用都提供了较好的用户界面,在用仿真库中的元器件连成原理图后就可以进行仿真(当然要设置必要的仿真参数),但实际上只是用原理图自动产生了SPICE的格式语句,还是要 ...

  7. as follows ,as follow && following

    在现在牛津英语上,as follow 和 as follows 用法差不多的,但后者更常用,不是说谁指一个谁指好几个.牵强附会! 为了保证正确性,你应该用as follows,单数的最好少用.意义差不 ...

  8. Android Design Support Library使用详解

    Android Design Support Library使用详解 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的And ...

  9. NLog的使用

    1.项目添加NLog的项目引用: 2.将工程的framework框架改为3.5或4.0,将配置文件[NLog.config]拷贝至运行的bin/(release/debug)路径下 3.项目中代码使用 ...

  10. MySQL数据库5 - 插入数据，修改数据，删除数据

    一.插入数据 1. 所有列都插入值 INSERT [INTO] TABLE_NAME VALUES(V1,V2....Vn); 特点:列值同数,列值同序 eg: insert into users v ...