网站中的图片自动切换

今天上一套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. deep_learning_backprop

    反向传播理解–从抽象到具体 神经网络从计算的角度看,数据是从底层输入,经过每一层,根据与该层之间的权重计算以一个中间结果,这个中间结果再经过一个非线性激活函数作用,得到该层的输出结果,然后把该层的输出 ...

  2. JMeter函数整理

    "_intSum” 功能:用于计算多个整数的和,可以是计算正整数和负整数的和,它有N个参数,最少有3个参数,最多不限.最后一个参数是函数名称,前面的其它参数是要求和的整数.这个函数在函数对话 ...

  3. 22_5mybatis多表操作

    1.表之间的关系 一对多 多对一 一对一 多对多 举例: 用户和订单就是一对多 订单和用户就是多对一 一个用户可以下多个订单 多个订单属于同一个用户 人和身份证号就是一对一 一个人只能有一个身份证号 ...

  4. Scrapy爬取小说简单逻辑

    Scrapy爬取小说简单逻辑 一 准备工作 1)安装Python 2)安装PIP 3)安装scrapy 4)安装pywin32 5)安装VCForPython27.exe ........... 具体 ...

  5. 集合(七) Set—HashSet，TreeSet和LinkedHashSet

    四.Set Set和List一样,也是继承Collection的接口,但Set是不包含重复元素的集合.由于先啃下Map,Set的难度将会大幅减小.因为Set基本上都是以Map为基础实现的,例如两个主要 ...

  6. 浅析Service Worker

    一.service worker是什么? 平常浏览器窗口中跑的页面运行的是主JavaScript线程,DOM和window全局变量都是可以访问的. Service Worker是走的另外的线程,可以理 ...

  7. Web界面开发必看！Kendo UI for jQuery编辑功能指南第一弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. 王某的NLP之路前言

    感谢基友jayjay和海英学姐的指路,其实我的方向一直比较迷茫. 因为自己是会计学出身的,前三年也没接触编程,第一次接触还是在2016年,尝试用聚宽的量化接口,当时顺便学了python 的一点知识. ...

  9. Python模拟浏览器多窗口切换

    # 模拟浏览器多窗口切换 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Chro ...

  10. RAID的多种实现

    RAID的诞生 由加利福尼亚大学伯克利分校(University of California-Berkeley)在1988年,发表的文章:"A Case for Redundant Arra ...