网站中的图片自动切换

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




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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title></title>
  6.     <script type="text/javascript" src="indexpic.js"></script>
  7.     <link rel="stylesheet" type="text/css" href="indexpic.css">
  8. </head>
  9. <body>
  10. <div id="main" class="main">
  11.     <div id="pic" class="pic">
  12.         <div id="pictures" class="pictures">
  13.  
  14.             <div id="p1" class="p" style="display: block;background-color: red">
  15.                 <!-- <img src="img/1.jpg"> -->
  16.             </div>
  17.             <div id="p2" class="p" style="display: none;background-color: yellow">
  18.                 <!-- <img src="img/2.jpg"> -->
  19.             </div>
  20.             <div id="p3" class="p" style="display: none;background-color: blue">
  21.                 <!-- <img src="img/3.jpg"> -->
  22.             </div>
  23.             <div id="p4" class="p" style="display: none;background-color: green">
  24.                 <!-- <img src="img/4.jpg"> -->
  25.             </div>
  26.             <div id="p5" class="p" style="display: none;background-color: pink">
  27.                 <!-- <img src="img/5.jpg"> -->
  28.             </div>
  29.  
  30.         </div>
  31.         <div class="btn">
  32.             <button style="background: #ed6911;">1</button>
  33.             <button>2</button>
  34.             <button>3</button>
  35.             <button>4</button>
  36.             <button>5</button>
  37.         </div>
  38.     </div>
  39. </div>
  40. </body>
  41. </html>

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

  1. button{
  2.     background: none;
  3.     border: 1px solid black;
  4. }
  5. .btn{
  6.     margin-top: -35px;
  7.     padding-left: 340px;
  8. }
  9. .p{
  10.     width: 100%;
  11.     height: 170px
  12. }
  13. #main{
  14.     width: 490px;
  15.     height: 280px;
  16.     margin: 0 auto;
  17. }
  18. #pictures{
  19.     height: 170px;
  20.     width: 100%;
  21.     margin-top: 110px;
  22. }

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

  1. window.onload=tab;
  2.  
  3. function tab(){
  4.   //定义索引和定时器
  5.   var index=0;
  6.   var timer=null;
  7.   //获取按钮和div的个数
  8.   var bt=document.getElementsByTagName('button');
  9.   var divs=document.getElementsByClassName('p');
  10.   //设定mouseover和mouseout事件
  11.   for(var i=0;i<bt.length;i++){
  12.     bt[i].id=i;
  13.     bt[i].onmouseover=function(){
  14.       clearInterval(timer);
  15.       changeOption(this.id);
  16.     }
  17.     bt[i].onmouseout=function(){
  18.       timer=setInterval(autoPlay,2000);
  19.     }
  20.   }
  21.   //清除和设置定时器
  22.   if(timer){
  23.     clearInterval(timer);
  24.     timer=null;
  25.   }
  26.   timer=setInterval(autoPlay,2000);
  27.   //自动播放函数
  28.   function autoPlay(){
  29.       index++;
  30.       if(index>=bt.length){
  31.          index=0;
  32.       }
  33.       changeOption(index);
  34.   }
  35.   //获取当前button索引值
  36.   function changeOption(curIndex){
  37.     for(var j=0;j<bt.length;j++){
  38.       bt[j].style.background='none';
  39.        divs[j].style.display='none';
  40.     }
  41.     bt[curIndex].style.background='#ed6911';
  42.     divs[curIndex].style.display='block';
  43.     index=curIndex;
  44.   }
  45. }

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. Pysnooper 一款大受欢迎的Debug模块

    Github地址 安装 PIP pip install pysnooper import pysnooper @pysnooper.snoop() def number_to_bits(number) ...

  2. mysql数据库：分表、多表关联、外键约束、级联操作

    一.分表.外键.级联.多对一 二.多对多 三.一对一 一.分表.外键.级联.多对一 将部门数据与员工数据放到同一张表中会造成 数据重复 结构混乱 扩展维护性差 需要分表 create table de ...

  3. 使用cJSON解析JSON

    cJSON获取数组元素的每个值 { "operType": 0x5, "field": ["time","matchRule&qu ...

  4. Linux系统组成和获取命令帮助4

    Linux文件系统:        1.文件名名称严格区分字符大小写        2.文件可以使用除/以外任意字符        3.文件名长度不能超过255字符        4.以.开头的文件为 ...

  5. phpStorm中使用xdebug工具调试docker容器中的程序

    前提准备 phpstorm开发软件 + dnmp(docker + nginx + mysql +php) 配置好hosts 映射比如 /etc/hosts      127.0.0.1 tp5.de ...

  6. Java语言基础(10)

    1 方法(三) 案例:Demo1 import java.util.Scanner; public class Demo1 { static int min(int num1,int num2){ i ...

  7. SQL Server中四类事务并发问题的实例再现（转）

    本篇文章将用实例再现数据库访问中四类并发问题,希望能让初学者能对事务的并行性有进一步的理解. 首先,让我们先来了解一下并行问题以及事务隔离级别这两个概念.在数据库中,假设如果没有锁定且多个用户同时访问 ...

  8. Python numpy.ZIP 安装问题

    今天在python上安装numpy,按照网上教程,安装pip,然后命令行直接:pip install numpy  .但是一直因为资源问题下载失败. 后来下载了一个numpy-1.11.2.zip 安 ...

  9. vue的store状态管理模式

    var store = { debug: true, state: { message: 'Hello!' }, setMessageAction (newValue) { //所有 store 中 ...

  10. Python3之文件读写操作详解

    文件操作的步骤: 打开文件 -> 操作文件 -> 关闭文件 切记:最后要关闭文件(否则可能会有意想不到的结果) 打开文件 文件句柄 = open('文件路径', '模式') 指定文件编码 ...