查看本章节

查看作业目录

需求说明：

使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片，切换到第 6 张后从头开始切换，在图片的下方显示 6 个小圆点，一一对应 6 张图片，图片切换时，图片对应的小圆点的颜色同时发生变化

实现思路：

  1. 在 HTML 页面中，添加 6 个 <img /> 标签，用于显示 6 张图片
  2. 添加 1 个 <ul> 标签和 6 个 <li> 标签，用于显示图片下方的 6 个小圆点
  3. 使用 setInterval() 方法每隔 2 秒执行一次图片切换操作 在图片切换的函数中，根据索引值找到当前需要切换的图片，然后使用 fadeIn() 方法淡入，同时找到当前图片的兄弟节点，然后使用 fadeOut() 方法淡出
  4. 找到当前图片对应小圆点，添加样式类，并清除兄弟节点的样式类

实现代码：

核心代码：

<script type="text/javascript">

	$(function(){

		var timer;

		var cur = 0;

		var len = $("#ads li").length;

		function showImg(){

			timer = setInterval(function(){

				cur++;

				if(cur>=len){

					cur = 0;

				}

					console.log(cur);

				$("#ads img").eq(cur).fadeIn(2000).siblings("img").fadeOut(2000);

				$("#ads>ul>li").eq(cur).addClass("active").siblings("li").removeClass("active");

			},2000);

		}

		showImg();

	});

</script>

完整代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			ul{

				list-style: none;

			}

			#ads{

				width: 590px;

				height: 250px;

				margin: 20px auto;

				position: relative;

			}

			#ads img{

				width: 100%;

				height: 100%;

				position: absolute;

				left: 0;

				top: 0;

				display: none;

			}

			#ads img.show{

				display: block;

			}

			#ads ul{

				position: absolute;

				bottom: 10px;

				left: 240px;

			}

			#ads ul li{

				width: 12px;

				height: 12px;

				float: left;

				background: whitesmoke;

				margin-right: 8px;

				border-radius: 50%;

				cursor: pointer;

			}

			#ads ul li.active{

				background: orange;

			}

		</style>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="ads">

			<img src="img/img_1.jpg" class="show">

			<img src="img/img_2.jpg" >

			<img src="img/img_3.jpg" >

			<img src="img/img_4.jpg" >

			<img src="img/img_5.jpg" >

			<img src="img/img_6.jpg" >

			<ul>

				<li class="active"></li>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

				<li></li>

			</ul>

		</div>

		<script type="text/javascript">

			$(function(){

				var timer;

				var cur = 0;

				var len = $("#ads li").length;

				function showImg(){

					timer = setInterval(function(){

						cur++;

						if(cur>=len){

							cur = 0;

						}

							console.log(cur);

						$("#ads img").eq(cur).fadeIn(2000).siblings("img").fadeOut(2000);

						$("#ads>ul>li").eq(cur).addClass("active").siblings("li").removeClass("active");

					},2000);

				}

				showImg();

			});

		</script>

	</body>

</html>

使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片的更多相关文章

  1. JQuery动画之淡入淡出动画

    1. 淡入动画 1.1 不带参数的淡入动画 格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...

  2. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  3. [Android]异步加载图片，内存缓存，文件缓存，imageview显示图片时增加淡入淡出动画

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html  这个可以实现ImageView异步加载 ...

  4. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  5. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  6. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  7. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  8. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  9. JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

    /** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...

随机推荐

  1. 【Reverse】每日必逆0x01

    附件:https://files.buuoj.cn/files/7458c5c0ce999ac491df13cf7a7ed9f1/SimpleRev 题解 查壳 64位ELF文件,无壳 IDApro处 ...

  2. Nginx流量拷贝

    1. 需求 将生产环境的流量拷贝到预上线环境或测试环境,这样做有很多好处,比如: 可以验证功能是否正常,以及服务的性能: 用真实有效的流量请求去验证,又不用造数据,不影响线上正常访问: 这跟灰度发布还 ...

  3. awk的基本用法

    最近遇到导入的csv文件首行为日期,但需要将日期作为列导入到数据库中,直接使用ctl文件好像无法实现,了解到awk这个强大的命令. 导入的CSV文件除了首行为日期,其他的都是格式相同的.需要将首行单独 ...

  4. mybatis-插件开发

    在Executor.StatementHandler.parameterHandler.resultSetHandler创建的时候都有一步这样的操作xxxHandler=interceptorChai ...

  5. 【Linux】【Basis】【网络】网络相关的内核参数

    Linux系统内核设置优化tcp网络,# vi /etc/sysctl.conf,添加以下内容 net.ipv4.tcp_syncookies = 1 表示开启SYN Cookies.当出现SYN等待 ...

  6. entfrm-boot开发平台功能介绍【entfrm开源模块化无代码开发平台】

    简介 entfrm开发平台,是一个以模块化为核心的无代码开发平台,是一个集PC和APP快速开发.系统管理.运维监控.开发工具.OAuth2授权.可视化数据源管理与数据构建.API动态生成与统计.工作流 ...

  7. 基于war的Spring Boot工程

    一.简介 前面创建的Spring Boot工程最终被打为了Jar包,是以可执行文件的形式出现的,其使用了Spring Boot内嵌的Tomcat作为Web服务器来运行web应用的.新版Dubbo的监控 ...

  8. 【Linux】【Shell】【Basic】条件测试和变量

    bash脚本编程       脚本文件格式:         第一行,顶格:#!/bin/bash         注释信息:#         代码注释:         缩进,适度添加空白行:   ...

  9. Properties类继承HashTable类，一般用来给程序配置属性文件。

    package com.itcast.demo04.Prop;import jdk.internal.util.xml.impl.ReaderUTF8;import sun.nio.cs.UTF_32 ...

  10. angular关于select的留白问题

    Angular select留白的问题 小白的总结,大神勿喷:需要转载请说明出处,如果有什么问题,欢迎留言 总结:出现留白说明你的ng-model的值在option的value中没有对应的值: 一.直 ...