zoukankan      html  css  js  c++  java
  • 【课堂实例】轮播图

    【目标】

    制作一个有5张图片的轮播图

    【分析】

    想要制作轮播图,需要如下3个步骤:

    1、页面打开之后,第一个图片显示,其余的图片,隐藏

    2、图片间隔5秒轮播一次

    3、传到第5个图后回到第1张

    【制作】

      1、页面打开之后,第一个图片显示,其余的图片,隐藏:

        $(“.bg”).not(“:eq(0)”).hide();

      2、间隔5秒轮播:

    Var i=0;

    $(function(){

    $(“.bg”).not(“:eq(0)”).hide();   //不是第一张图片的其余图片都隐藏

    setInterval(function(){

           i++;

           $(“.bg”).eq(i).show();           //第i个图片显示

           $(“.bg”).not(“:eq(“+i+”)”).hide();             //不是第i个图片的隐藏

    },5000);

    })

      3、传到第5个图后回到第1张:

    if(i==5)

    {

      i=0;

    }

    【完整程序】

    Var i=0;

    $(function(){

    $(“.bg”).not(“:eq(0)”).hide();   //不是第一张图片的其余图片都隐藏

    setInterval(function(){

           i++;

    if(i==5)

    {

      i=0;

    }

           $(“.bg”).eq(i).show();           //第i个图片显示

           $(“.bg”).not(“:eq(“+i+”)”).hide();             //不是第i个图片隐藏

    },5000);

    })

  • 相关阅读:
    sed
    zabbix时间不同步
    zabbix-agent安装
    zabbix安装(网络)
    sendmail启动报错
    12306:被骂十年不吭声,终成大器
    一文带你看清HTTP所有概念(转)
    为什么 K8s 在阿里能成功(转)
    一文解读融资方式
    一文解读工业互联网 (转)
  • 原文地址:https://www.cnblogs.com/59muyu/p/4676546.html
Copyright © 2011-2022 走看看