查看本章节

查看作业目录

需求说明：

使用 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. Docker学习（五）——Docker仓库管理

    Docker仓库管理     仓库(Repository)是集中存放镜像的地方. 1.Docker Hub       目前Docker官方维护了一个公共仓库Docker Hub.大部分需求都可以通过 ...

  2. Shell学习(六)——条件判断总结

    Shell学习(六)--条件判断总结 [1]https://www.cnblogs.com/zhw-626/p/8528001.html [2]https://www.cnblogs.com/yizh ...

  3. Android Bitmap 全面解析(二)加载多张图片的缓存处理

    一般少量图片是很少出现OOM异常的,除非单张图片过~大~ 那么就可以用教程一里面的方法了通常应用场景是listview列表加载多张图片,为了提高效率一般要缓存一部分图片,这样方便再次查看时能快速显示~ ...

  4. Hibernate 总结（转）

    JMX:Java Management Extensions.JCA: J2EE Contector ArchitectureJNDI: Java Namind and Directory Inter ...

  5. Spring Cloud Feign原理详解

    目录 1.什么是Feign? 2.Open Feign vs Spring Cloud Feign 2.1.OpenFeign 2.2.Spring Cloud Open Feign 3.Spring ...

  6. CentOS6设置Django开发环境

    今天在我的Centos6.5机器上安装 Django 开发环境,在安装完使用 "django-admin.py startproject myapp" 创建应用的时候报了下面的错误 ...

  7. hash 模式与 history 模式小记

    hash 模式 这里的 hash 就是指 url 后的 # 号以及后面的字符.比如说 "www.baidu.com/#hashhash" ,其中 "#hashhash&q ...

  8. new Date（）与setDate（）参数

    New Date()与setDate()参数 相信网上已经有很多关于日期的文章了,这里只是我自己再工作中遇到的问题然后加以总结: new Date() new Date() 一共有六种形式,五种带参数 ...

  9. 【C++】最长回文子串/动态规划

    ACM #include <bits/stdc++.h> using namespace std; const int maxn = 1010; char S[maxn]; int dp[ ...

  10. 漏洞扫描器-AWVS

    目录 介绍 漏洞扫描 网络爬虫==漏洞分析.验证 主机发现 子域名探测 SQL注入 HTTP头编辑 HTTP监听 介绍 AWVS为Acunetix Web Vulnarability Scanner的 ...