网站中的图片自动切换

今天上一套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. 第八章· Redis API 开发

    Redis 开发 1.源码安装Python环境 Python官网:https://www.python.org/ #下载Python3.6.4安装包 [root@db03 ~]# wget https ...

  2. IO框架：asyncio 上篇

    如何定义/创建协程 只要在一个函数前面加上 async 关键字,这个函数对象是一个协程,通过isinstance函数,它确实是Coroutine类型. from collections.abc imp ...

  3. Win10 家庭版找不到 gpedit.msc；win10怎样关闭windows defender

    家庭版本是自带策略组相关文件的,只需自定义一个txt,输入下面代码,再改成cmd 后缀格式文件.然后右键,管理员权限运行即可 @echo offpushd "%~dp0"dir / ...

  4. 微软Blazor组件发布，DevExpress v19.1.8中可用：Charts新功能

    点击获取DevExpress v19.2.3最新完整版试用下载 DevExpress UI for Blazor在v19.1.8中可用,此次更新发布包括DevExpress Blazor组件的主要功能 ...

  5. 题解 小B的询问

    题面 解析 这就是道莫队模板啊啊!! 因此,似乎并没有什么好讲的. 莫队算法传送门 我们只需要将询问存下来, 离线处理就行了. 还是上代码吧: #include<bits/stdc++.h> ...

  6. Codeforces 884f F. Anti-Palindromize

    题  OvO http://codeforces.com/contest/884/problem/F (Educational Codeforces Round 31 - F) 884f 解 题目标签 ...

  7. jquery reset选择器 语法

    jquery reset选择器 语法 作用::reset 选择器选取类型为 reset 的 <button> 和 <input> 元素.直线电机滑台 语法:$(":r ...

  8. js拖拽文件夹上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  9. Confluence 6 分享一个文件

    协同合作和编辑不仅仅是发生在页面中,很多时候你需要与你的项目小组针对文档,报告,图片,表格进行协同操作.不管是针对性的市场计划或者一个完整的项目计划,你可以在 Confluence 中让你的项目小组成 ...

  10. luoguP1739 表达式括号匹配 x

    P1739 表达式括号匹配 题目描述 假设一个表达式有英文字母(小写).运算符(+,—,*,/)和左右小(圆)括号构成,以“@”作为表达式的结束符.请编写一个程序检查表达式中的左右圆括号是否匹配,若匹 ...