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);

    })

  • 相关阅读:
    C#---将数据库数据转换为json格式
    ASP.NET ---根据值让树中某一节点选中
    SQL---查询树中某个节点及其所有子节点
    CSS---相对定位笔记
    CSS---绝对定位笔记
    滑雪
    Self Numbers
    Lotto
    Parencodings
    Robot Motion
  • 原文地址:https://www.cnblogs.com/59muyu/p/4676546.html
Copyright © 2011-2022 走看看