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

<!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. Adding List Item Element At Runtime In Oracle Forms

    Add combo list / drop down list item element at runtime in Oracle forms.SyntaxPROCEDURE ADD_LIST_ELE ...

  2. Zabbix 3.0.3 SQL Injection

    Zabbix version 3.0.3 suffers from a remote SQL injection vulnerability. ============================ ...

  3. VirtualProvider （VirtualCube）虚拟立方体

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. SQL Server 2012 管理新特性：AlwaysOn【转】

    http://jimshu.blog.51cto.com/3171847/871169 见超链接

  5. Spring4.1.0 整合quartz1.8.2 时 ： class not found : org.springframework.scheduling.quartz.JobDetailBean

    最近做一个 Spring4.1.0 集成 quartz1.8.2 定时器功能,一直报 class not found : org.springframework.scheduling.quartz.J ...

  6. Spring IoC原理详解

    去掌握一门技术的时候,往往很多人都忽略了一点,只是一味地去写代码,原理层面的东西从来就不理会 还有就是学习的过程中,不去想为什么有了当前的写法,却有着这么一门技术可以代替它 一般来说,在写程序的时候, ...

  7. 51nod 1163 最高的奖励(贪心+优先队列)

    题目链接:51nod 1163 最高的奖励 看着这题我立马就想到昨天也做了一道贪心加优先队列的题了奥. 按任务最晚结束时间从小到大排序,依次选择任务,如果该任务最晚结束时间比当前时间点晚,则将该任务的 ...

  8. ios基础篇（十八）——Delegate 、NSNotification 和 KVO用法及其区别

    一.Delegate Delegate本质是一种程序设计模型,iOS中使用Delegate主要用于两个页面之间的数据传递.iphone中常用@protocol和delegate的机制来实现接口的功能. ...

  9. sonar-gerrit-plugin-2.2.0 安装

    这是一个很新的插件国内使用的用户还是很少的,公司有需要才花了一段时间去研究. 作用:在 code review的时候可以将sonar的检测结果直接集成返回.帮助po对code 进行review. 请严 ...

  10. OC语言构造方法

    OC语言构造方法 一.构造方法 (一)构造方法的调用 完整的创建一个可用的对象:Person *p=[Person new]; New方法的内部会分别调用两个方法来完成2件事情,1)使用alloc方法 ...