网站中的图片自动切换

今天上一套tab切换效果的代码




动图就自己实现吧！
下面贴HTML代码，大体分两部分，图片div和按钮div，代码很容易看懂~

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title></title>

    <script type="text/javascript" src="indexpic.js"></script>

    <link rel="stylesheet" type="text/css" href="indexpic.css">

</head>

<body>

<div id="main" class="main">

    <div id="pic" class="pic">

        <div id="pictures" class="pictures">

            <div id="p1" class="p" style="display: block;background-color: red">

                <!-- <img src="img/1.jpg"> -->

            </div>

            <div id="p2" class="p" style="display: none;background-color: yellow">

                <!-- <img src="img/2.jpg"> -->

            </div>

            <div id="p3" class="p" style="display: none;background-color: blue">

                <!-- <img src="img/3.jpg"> -->

            </div>

            <div id="p4" class="p" style="display: none;background-color: green">

                <!-- <img src="img/4.jpg"> -->

            </div>

            <div id="p5" class="p" style="display: none;background-color: pink">

                <!-- <img src="img/5.jpg"> -->

            </div>

        </div>

        <div class="btn">

            <button style="background: #ed6911;">1</button>

            <button>2</button>

            <button>3</button>

            <button>4</button>

            <button>5</button>

        </div>

    </div>

</div>

</body>

</html>

这个还是比较简单的div结构，下面是对应的css代码

button{

    background: none;

    border: 1px solid black;

}

.btn{

    margin-top: -35px;

    padding-left: 340px;

}

.p{

    width: 100%;

    height: 170px

}

#main{

    width: 490px;

    height: 280px;

    margin: 0 auto;

}

#pictures{

    height: 170px;

    width: 100%;

    margin-top: 110px;

}

对所有div的简单布局，最后主要实现功能~所以重要的js代码如下：

window.onload=tab;

function tab(){

  //定义索引和定时器

  var index=0;

  var timer=null;

  //获取按钮和div的个数

  var bt=document.getElementsByTagName('button');

  var divs=document.getElementsByClassName('p');

  //设定mouseover和mouseout事件

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

    bt[i].id=i;

    bt[i].onmouseover=function(){

      clearInterval(timer);

      changeOption(this.id);

    }

    bt[i].onmouseout=function(){

      timer=setInterval(autoPlay,2000);

    }

  }

  //清除和设置定时器

  if(timer){

    clearInterval(timer);

    timer=null;

  }

  timer=setInterval(autoPlay,2000);

  //自动播放函数

  function autoPlay(){

      index++;

      if(index>=bt.length){

         index=0;

      }

      changeOption(index);

  }

  //获取当前button索引值

  function changeOption(curIndex){

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

      bt[j].style.background='none';

       divs[j].style.display='none';

    }

    bt[curIndex].style.background='#ed6911';

    divs[curIndex].style.display='block';

    index=curIndex;

  }

}

tab切换效果 网站中的图片自动切换的更多相关文章

  1. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  2. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  3. jquery 图片自动切换

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

  4. Android借助Handler，实现ViewPager中页面的自动切换（转）

    在很多电商网页及app上都有自动切换的商品的推广快,感觉体验挺不错的,正好今天学习使用ViewPager,因此也实现了一个功能类似的demo. 下面是其中的两个截图:           实现一个自动 ...

  5. 利用JS实现点击按钮后图片自动切换

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

  6. 使用 AHK 在 VS Code 中根据上下文自动切换输入法状态

    平常在VS Code打公式,中英文切换一直狂点 Shift 手都快按断了,于是试图用 AutoHotKey 搞一些自动切换输入法程序,让它根据当前输入环境自动切输入法. 之前在网上搜到的是切换键盘的( ...

  7. iOS开发之实现图片自动切换（类似android画廊效果）

    #import ViewController.h #define ImageViewCount 5   @interface ViewController ()<uiscrollviewdele ...

  8. js中网页图片自动更换的效果

    <script> var arr=new Array(); arr[]="url(images/city.jpg)"; arr[]="url(images/d ...

  9. 手机网站中 限制图片宽度 JS图片等比例缩放

    <script type="text/javascript"> $(function () { var w = $(".content-co").w ...

随机推荐

  1. 第十二章·Kibana深入-日志图形展示

    1.Kibana创建区域图 Kibana支持多重图从展示功能,需要日志是json格式的支持. Kibana区域图 打开浏览器,访问:http://10.0.0.54:5601   选择一个日志  ...

  2. 【转载】softmax的log似然代价函数（求导过程）

    全文转载自:softmax的log似然代价函数(公式求导) 在人工神经网络(ANN)中,Softmax通常被用作输出层的激活函数.这不仅是因为它的效果好,而且因为它使得ANN的输出值更易于理解.同时, ...

  3. windows设置自动清理log

    @echo off set srcDir="D:\xx\xx\xx" set daysAgo=5 forfiles /p %srcDir% /s /m *.* /d -%daysA ...

  4. CSS 定位详解

    CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position position 属性的作用 position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即posi ...

  5. HDU 6040 - Hints of sd0061 | 2017 Multi-University Training Contest 1

    /* HDU 6040 - Hints of sd0061 [ 第k小数查询,剪枝 ] 题意: 给出随机数列 a[N] (N < 1e7) 询问 b[M] (M < 100) ,对于每个询 ...

  6. 开始学习shell

    运行shell脚本有两种方法: 作为可执行程序,假如在某个目录下,编写了一个shell脚本test.sh,想要执行这个脚本,就需要先cd进入脚本所在目录, chmod +x ./test.sh # 是 ...

  7. Linux命令（Ubuntu）

    VMware 打开命令模式快捷键:  Ctrl + Alt + T VMware 里面Ubuntu不能全屏, 本来想着习惯就好, 知道今天看一些信息不能全部显示, 最终不能忍了. 上网找了很多方法 主 ...

  8. cookbook 6.1 温标的转换

    任务: 在开氏温度(Kelvin).摄氏度(Celsius).华氏温度(Fahrenheit).兰金温度(Rankine)之间做转换 解决方案: #coding=utf-8 class Tempera ...

  9. Codevs 1213 解的个数(exgcd)

    1213 解的个数 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 已知整数x,y满足如下面的条件: ax+by+c=0 p< ...

  10. mongodb Sort排序能够支持的最大内存限制为32M Plan executor error during find: FAILURE

    1.一个比较老的游戏服维护,关服维护后启动时报错 2.看到关于mongodb的报错,于是去查一下mongodb的日志 Plan executor error during find: FAILURE, ...