网站中的图片自动切换

今天上一套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. sql语句 小记录

    select Name '姓名',Age '年龄',(select LessonName + ',' from Lesson where StudentId=s1.Id FOR XML PATH('' ...

  2. jsp学习——九大内置对象

    JSP一共有九个内置对象,分别为:request.response.session.application.out.pagecontext.config.page.exception 博客:JSP的九 ...

  3. js去掉url后某参数【函数封装】

    function delParam(paramKey) { var url = window.location.href; //页面url var urlParam = window.location ...

  4. 移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题

    var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).h ...

  5. Linux日常之命令awk

    参考:http://www.zsythink.net/archives/tag/awk/ 一. 命令awk简介 1. awk是一种编程语言,用于对文本和数据进行处理的 2. 具有强大的文本格式化能力 ...

  6. Legendre公式和Kummer定理

    Legendre公式 对于质数\(p\),函数\(v_p(n)\)为\(n\)标准分解后\(p\)的次数 显然有 \[v_p(n!) = \sum\limits_{i = 1}^{\infty} \l ...

  7. 前端每周清单第 49 期：Webpack 4 Beta 尝鲜，React Windowing 与 setState 分析，Web Worker 实战

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...

  8. 02-SQLServer数据库附加后处于只读模式

    一.总结 附加数据库后,遇到只读,并且取消只读的时候报错操作系统错误,一般都是附加的时候,使用的是SQLServer用户登录附加的,只要使用windows用户登录数据库重新附加一下就ok了. 二.处理 ...

  9. js高阶函数汇总

    map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,函数按照原始数组元素顺序依次处理元素. 注意: map() 不会对空数组进行检测. 注意: map() 不会改变原始数组. ...

  10. linux 发送 post 请求

    curl -H "Content-type: application/json" -X POST -d '{"accoId":"IDAP_000000 ...