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

<!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. μC/OS-Ⅲ系统中的任务就续表

    μC/OS-Ⅲ支持任意数目的不同优先级.一般情况下64级优先级就足够了. 在μC/OS-Ⅲ中所有已经就绪等待运 行的任务都被放入一个我为的“就续表”(ready list)中.就续表包括两部分:一个就 ...

  2. 面试复习（C++）之直接插入排序

    #include <iostream> using namespace std; void Insertsort(int *a,int len) { ;j<len;j++) { in ...

  3. 专家解读：BPM与OA的区别

    演进历程 传统OA 模块化架构,仅能满足管理执行的刚性效率,系统的专业化程度有限. BPM 平台化架构,管理要求精细化程度高,系统更专业化,更注重整合. BPM SAAS 基于云架构,跨组织社交化,系 ...

  4. AnyCAD.NET C#开发CAD软件实践（一）

    免费的AnyCAD.NET发布了!俺喜欢的C#有了大展前途的机会了. 打算用这个框架搭建一套实用的CAD系统,目标是能买出去10套以上. 先看看AnyCAD.NET的自我介绍. http://www. ...

  5. 为Informix数据库开启事务

    1.首先在Informix数据库安装根目录的etc文件夹下找到名为ONCONFIG.on_xxxx的配置文件: 2.打开ONCONFIG.on_xxxx文件,在第409行的位置找到TAPEDEV \\ ...

  6. SpringMVC与MyBatis整合之日期格式转换

    在上一篇博客<SpringMVC与MyBatis整合(一)——查询人员列表>中遗留了日期格式转换的问题,在这篇记录解决过程. 对于controller形参中pojo对象,如果属性中有日期类 ...

  7. open nms安装教程

    而在正式的任务,我被要求在Windows平台上部署开源网络管理系统.虽然工作的任务,我得到了一些问题,对此我无法在网上寻找解决的问题,我用的命中和试验方法得到了解决.然后我想就这些问题及其解决办法写. ...

  8. Asp.net MVC 示例

    public ActionResult Browse(string id){        using (musicstoreEntities db = new musicstoreEntities( ...

  9. VMware下利用ubuntu13.04建立嵌入式开发环境之一

    1.软件准备: (1) VMware网上很多,需要根据自己的需要选择,这里选用的VMware Workstation 9. (2)ubuntu  操作系统,同样根据自己的需要下载系统安装包.这里我选择 ...

  10. windows、ubuntu下eclipse搭建java、Python环境问题总结

    前两篇博文分别讲述了如何在windows.ubuntu下用eclipse搭建java.python环境,下面就针对本人遇到的问题做一个总结. 一.windows下关于java环境变量JAVA_HOME ...