zoukankan      html  css  js  c++  java
  • 图片组淡入淡出效果

    /// <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个数字上的样式.
    });
    });

  • 相关阅读:
    如何利用JMeter模拟超过 5 万的并发用户
    JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传
    jmeter内存溢出处理方式记录
    JMeter压力测试入门教程[图文]
    本机Tomcat启动myeclipse,用Jmeter录制脚本端口冲突解决办法
    Jmeter 录制脚本
    Jmeter基础之---jmeter基础概念
    Jmeter性能测试 入门
    SSH Secure Shell Client安装和使用
    面向对象2
  • 原文地址:https://www.cnblogs.com/unintersky/p/2844496.html
Copyright © 2011-2022 走看看