• 图片组淡入淡出效果


    /// <reference path="jquery-1.8.3-vsdoc.js" />
    $(document).ready(function () {
    // var lis = $("#images_box_ul").children("li");

    // var numbers = $(".img_box_number").children("li");
    // var image_counts = lis.length;
    // var i = 0;
    // var play;
    // autoPlay();
    // function autoPlay() {
    // play = setInterval(function () {
    // if (i == 0) { i = 1 }; //不加这个判断,第1次呈现的时候将等待2次才会更换图片.因为默认显示的是第一张,所以赋值i为1,从第2张开始循环.仅限第1次的时候
    // if (i == image_counts) { i = 0 }; //如果这个值等于图片总数的时候.将其赋值为0,重新开始循环
    // $(".in_imgbox_li").removeClass("in_imgbox_li"); //找到当前显示图片的class,并且移除
    // lis.eq(i).addClass("in_imgbox_li"); //第一次从eq值为0开始,也就是第1个.为其添加样式,也就是显示
    // $(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除
    // numbers.eq(i).addClass("in_imgbox_number"); //添加第i个数字上的样式.
    // i++; //自增1
    // }, 3000); //延时3秒执行一次
    // }

    var lis = $("#images_box_ul").children("li");
    var numbers = $(".img_box_number").children("li");
    var visible_li = $("#images_box_ul li:visible");
    var image_counts = lis.length;
    var i = 0;
    var play;
    autoPlay();
    function autoPlay() {
    play = setInterval(function () {
    if (i == 0) { i = 1 }; //不加这个判断,第1次呈现的时候将等待2次才会更换图片.因为默认显示的是第一张,所以赋值i为1,从第2张开始循环.仅限第1次的时候
    if (i == image_counts) { i = 0 }; //如果这个值等于图片总数的时候.将其赋值为0,重新开始循环
    visible_li.animate({ opacity: "0" }, 20); //200毫秒内将当前显示的图片的opacity属性改为0,大括号内是键值对的关系
    lis.eq(i).animate({ opacity: "1" }, 200); //200毫秒内将当前序号的opacity属性改为1
    $(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除
    numbers.eq(i).addClass("in_imgbox_number"); //添加第i个数字上的样式.
    i++; //自增1
    }, 3000); //延时3秒执行一次
    }
    lis.mouseover(function () {
    clearInterval(play);
    }).mouseout(function () {
    autoPlay();
    });
    numbers.click(function () {//点击数字的时候
    clickNo = $(this).index(); //获取当前点击的元素的序号
    $(".in_imgbox_li").removeClass("in_imgbox_li"); //找到当前显示图片的class,并且移除
    lis.eq(clickNo).addClass("in_imgbox_li"); //第一次从eq值为0开始,也就是第1个.为其添加样式,也就是显示
    $(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除
    numbers.eq(clickNo).addClass("in_imgbox_number"); //添加第i个数字上的样式.
    });
    });

  • 相关阅读:
    LINUX
    DOCKER
    计算牛的数目
    计算a^3=b^3+c^3+d^3
    用递归计算C(m,n)
    A Mathematical Curiosity
    Who is lier?
    我的第一篇 实习报告
    R.java
    天气系统
  • 原文地址:https://www.cnblogs.com/unintersky/p/2844496.html
Copyright © 2020-2023  润新知