使用图片进行点击切换效果

<!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:510px;

            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:510px;

        }

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

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

    </p>

    <script type="text/javascript">

    //1.找节点

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

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

    //可见宽度

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

    //2.加事件

    // 1 ===> -510 * 0 px

    // 2 ===> -510 * 1 px

    // 3 ===> -510 * 2 px

    // 4 ===> -510 * 3 px

    // ...

    // 9 ===> -510 * 8 px

    // inner.style.left = ???? + "px";

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

        buttonList[i].index = i;

        buttonList[i].onclick = function() {

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

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

                buttonList[j].className = "";

            }

            this.className = "active";

        }

    }

    </script>

</body>

</html>

然后我想给它加个定时自动走的效果，代码如下：

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

    setInterval(function() {

        index ++;

        if(index > buttonList.length - 1) {

            index = 0;

        }

        tab();

    },5000);

    </script>

JS实现简单的图片切换效果的更多相关文章

  1. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  2. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  3. js应用之实现图片切换效果

    数组的操作与应用 数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...

  4. js带缩略图的图片切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  6. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  7. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  8. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  9. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

随机推荐

  1. zabbix脚本报警

    zabbix问端设置: 1,设置报警类型 2.设置用户及媒体类型 send_to 就是zabbix输出的$1,脚本中药发给谁 3.设置触发器和动作 触发器 test.temp_conn (自己写一个简 ...

  2. 个推,手机推送api的使用

    个推的作用:可以为手机端的app使用者推送消息,而不是通过手机上的app对用户发送消息.所以用户是被动的接收信息.当然不只是只有对用户弹出窗口的这种方式,也可以把信息推送给app,让app决定对用户实 ...

  3. jquery总结02-样式和属性

    .attr()  .removeAttr() 设置属性和移除属性,里面可以是属性,属性值 ,只有属性名时只获取第一个蒜素的属性值 .html() .text() .val()  html 获取包括标签 ...

  4. eclipse 条件断点的使用

    在某些特殊情况下,我们可能需要远程debug服务器进行问题追踪排查.比如在系统日志不够完善,没法定位问题的情况下需要远程debug进行排查. 但是服务器处于并发调用状态,怎样才能不影响其他业务系统调用 ...

  5. DuiLib 自定义识别控件

    遇到一个断点无法识别自定义的控件,运气比较好,一搜就搜出来了: 参考地址:http://www.bkjia.com/ASPjc/992050.html 主要是这个函数: CControlUI* CDi ...

  6. Linux 系统目录结构

    登录系统后,在当前命令窗口下输入命令: ls / 你会看到如下图所示: 树状目录结构: 以下是对这些目录的解释: /bin: bin是Binary的缩写, 这个目录存放着最经常使用的命令. /boot ...

  7. SPSS常用基础操作（3）——对数据资料进行整理

    在实际工作中,往往需要对取得的数据资料进行整理,使其满足特定的分析需求,下面介绍SPSS在资料整理方面的一些功能. 1.加权个案加权个案是指给不同的个案赋予不同的权重,以改变该个案在分析中的重要性.为 ...

  8. C#高级进阶--重写函数

    这里要说一下,重写是继承时发生,在子类中重新定义父类中的方法.例如:基类方法声明为virtual方法,派生类中使用override声明此方法的重写. 基类中的访问修饰符在子类中是不能被修改的.比如说基 ...

  9. github 使用教程初级版

    github 是一个基于 git 的代码托管平台,付费用户可以建私人仓库,免费用户只能使用公共仓库.对于一般人来说公共仓库就已经足够了,而且也没多少代码来管理.下面简单介绍如何使用 github,供初 ...

  10. 使用Dottrace跟踪代码执行时间

    当自己程序遇到性能问题,比如IIs请求反应缓慢,客户端程序执行缓慢,怎么分析是哪里出了问题呢?dottrace可以帮助.net程序跟踪出代码里每个方法的执行时间,这样让我们更清晰的看出是哪里执行时间过 ...