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

<!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. (转)内联（inline）函数与虚函数（virtual）的讨论

    本文转自: http://topic.csdn.net/t/20051220/09/4469273.html 函数的inline属性是在编译时确定的, 然而,virtual的性质是在运行时确定的,这两 ...

  2. 扩展XAF模型信息实现自定义功能

    如何隐藏 web listview 的 编辑控制列如下图: 这列怎么让它隐藏? 感谢[少侠]XAF_杨东 提供解答!感谢XAF_小学生整理.   A: 注册自定义接口IModelListViewExt ...

  3. linux chomd 学习

    chomd -R 777 directory_name :递归地给directory目录下所有文件和子目录的属主分配读的权限 ------2016-10-31 -- source: Linux chm ...

  4. UiAutomator环境搭建及详细操作

    一.环境搭建 1.1 必备条件 JDK SDK(API高于15) Eclipse(安装ADT插件) ANT(用于编译生成的jar) 安装JDK并添加环境变量 1.2 详细步骤 1.安装JDK并添加环境 ...

  5. c++ 文件读写模板

    #include <fstream> using namespace std; int main() { ifstream fin("in.txt"); ofstrea ...

  6. JDK的安装与配置

    1.什么是JDK(Java Development Kit) 开发工具,javac及基础核心类 运行环境,java及基础核心类 2.目前Java平台的版本 JavaSE(Java Platform S ...

  7. [Git] 怎么使用Git让代码回到以前的某个节点

    我们可以使某个文件回到以前的某个节点,也可以使整个文件夹下面的文件都回到以前的某个节点,下面只介绍某个文件的,全部的类似. 按步骤操作完成后本地你选中的文件会变成红色,此时的代码还是原来的代码,但是G ...

  8. 运行Maven是报错：No goals have been specified for this build

    No goals have been specified for this build. You must specify a valid lifecycle phase or a goal in t ...

  9. CAD迷你看图

    CAD迷你看图http://www.aec188.com/CAD迷你看图 2016R12超快.超小的CAD多功能看图工具,完全脱离AutoCAD浏览R14-R2016各版本DWG/DXF/DWF的二三 ...

  10. easy ui datagrid 中getSelections方法只能获取一行数据

    解决方案:设置  idField : "", // 设置标识