网站中的图片自动切换

今天上一套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. （十二）Linux Kernel suspend and resume

    一.对于休眠(suspend)的简单介绍   在Linux中,休眠主要分三个主要的步骤:   1) 冻结用户态进程和内核态任务   2) 调用注册的设备的suspend的回调函数, 顺序是按照注册顺序 ...

  2. centos7中的网卡名称相关知识

    转载自https://www.cnblogs.com/zyd112/p/8143464.html 一致性网络设备命名(Consistent Network Device Naming) 背景介绍: 在 ...

  3. [微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)

    废话不多说, 先上图: <!--pages/index/to_news/to_news.wxml--> <view class='tab'> <view class='l ...

  4. 浅谈apidoc的使用

    使用前提:服务器已经安装好apidoc了 1.项目根目录建立 apidoc.json ,文件基础信息如下 { "name": "项目名称", "ver ...

  5. C++中虚函数的作用和虚函数的工作原理

    1 C++中虚函数的作用和多态 虚函数: 实现类的多态性 关键字:虚函数:虚函数的作用:多态性:多态公有继承:动态联编 C++中的虚函数的作用主要是实现了多态的机制.基类定义虚函数,子类可以重写该函数 ...

  6. HH的项链 HYSBZ - 1878 （莫队/ 树状数组）

    HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一 段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此他的项链变得越来越长.有一天,他突然 ...

  7. gluOrtho2D与glViewport

    https://blog.csdn.net/HouraisanF/article/details/83444183 窗口与显示主要与三个量有关:世界坐标,窗口大小和视口大小.围绕这些量共有4个函数: ...

  8. QT容器类

    QList<T> 是一个指针数组,可以使用下标 append(), prepend(), insert() QList<QString> list; list<<& ...

  9. ULPFEC在WebRTC中的实现[转载]

    一.WebRTC对抗网络丢包的两种手段     丢包重传(NACK)和前向纠错(FEC).FEC是一种前向纠错技术,发送端将负载数据加上一定的冗余纠错码一起发送,接收端根据接收到的纠错码对数据进行差错 ...

  10. main方法类 为何由AppClassLoader加载

    AppClassLoader AppClassLoader应用类加载器,又称系统类加载器,负责在JVM启动时加载来自命令java中的classpath或者java.class.path系统属性或者CL ...