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

<!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. HDU 1405

    题意: 输入一个数n,输出它的素因子与这个素因子出现的次数. 分析: 用欧拉函数,变下形就好了,不再过多解释. 代码如下: #include <iostream> #include < ...

  2. C# 写的一个生成随机汉语名字的小程序

    最近因为要做数据库相关的测试,频繁使用到测试数据,手动添加太过于麻烦,而且复用性太差,因此干脆花了点时间写了一个生成随机姓名和相关数据的类,贴在这里,有需用的同志们可以参考一下.代码本身质量不好,也不 ...

  3. RadioButtonList 属性设置

    RadioButtonList 属性里有RepeatDirection 设为Horizontal

  4. app启动时间命令

    app启动: 冷启动和热启动 冷启动方式: adb shell am start -W -n package/activity 停止app命令: adb shell am force-stop pac ...

  5. C语言深度学习——第一天

    首先声明一下,在我们写的程序中,会使用到一个头文件# include <head.h> 因为,在linux系统编程的时候,会用到很多头文件,为此,我用一个头文件全部包含在一起,头文件内容如 ...

  6. ueditor 图片上传功能（.net）

    假如下载的net文件 所在工程引用bin文件中的Newtonsoft.Json.dll 在浏览器中运行 `net/controller.ashx`,如果返回 "`{"state&q ...

  7. mysql 获取当前日期及格式化 (转)

    MYSQL 获取当前日期及日期格式获取系统日期: NOW()格式化日期: DATE_FORMAT(date, format)注: date:时间字段format:日期格式 返回系统日期,输出 2009 ...

  8. 一步一步搭框架(asp.netmvc+easyui+sqlserver)-02

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-02 我们期望简洁带前台代码,如下: <table id="dataGrid" class=&quo ...

  9. ie11浏览器和chrome浏览器对于bgsound和background的一些区别

    今天在编写一个非常简单的网页的时候,按照书上写的,使用了一个jpg图片作为背景图片,用background属性放在<body>标签内,同时使用<bgsound>标签插入背景音乐 ...

  10. PHP往mysql数据库中写入中文失败

    该类问题解决办法就是 在建立数据库连接之后,将该连接的编码方式改为中文. 代码如下: $linkID=@mysql_connect("localhost","root&q ...