草庐IT

用jQuery实现轮播图——超简单(代码解释)

泽泽泽Ya 2023-06-30 原文

先看效果
鼠标悬浮时停止轮播，离开时自动轮播，点下一张小圆点会随着动

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper {
				width: 600px;
				height: 350px;
				border: 1px solid red;
				position: relative;
			}
		
			/* 5张图片叠加到一块 */
			.wrapper img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
		
			.wrapper img:nth-of-type(1) {
				display: block;
			}
		
			/* 小圆点 */
			.btn {
				width: 150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left: 225px;
				bottom: 10px;
				z-index: 100
			}
		
			.btn span {
				display: block;
				width: 15px;
				height: 15px;
				border: 3px solid white;
				border-radius: 50%;
			}
		
			/* 左右箭头 */
			.wrapper a {
				text-decoration: none;
				font-size: 50px;
				color: red;
				position: absolute;
				top: 35%;
			}
		
			.wrapper a:nth-of-type(1) {
				left: 10px;
		
			}
		
			.wrapper a:nth-of-type(2) {
				right: 10px;
			}
		
			.active {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="contain">
				<img src="./imgs/1.png" alt="">
				<img src="./imgs/2.png" alt="">
				<img src="./imgs/3.png" alt="">
				<img src="./imgs/4.png" alt="">
				<img src="./imgs/5.png" alt="">
			</div>
			<div class="btn">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void(0);">&lt;</a>
			<a href="javascript:void(0);">&gt;</a>
		</div>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			var index=0;
			// 点击上一张
			$("a:first").click(function(){
				prev_pic();
			})
			// 点击下一张
			$("a:last").click(function(){
				next_pic();
			})
			// 悬浮停止
			$(".wrapper").mouseover(function(){
				clearInterval(id);
			});
			$(".wrapper").mouseout(function(){
					autoplay();
			})
			
			
			// 下一张
			function next_pic(){
				index++;
				if(index>4){
					index=0;
				}
				addStyle();
			}
			
			// 上一张
			function prev_pic(){
				index--;
				if(index<0){
					index=4;
				}
				addStyle();
			}
			
			// 控制图片显示隐藏,小圆点背景色
			function addStyle(){
				$("img").eq(index).fadeIn();
				$("img").eq(index).siblings().fadeOut();
				$("span").eq(index).addClass("active");
				$("span").eq(index).siblings().removeClass("active");
			}
			
			// 自动轮播
			var id;
			autoplay();
			function autoplay(){
				id=setInterval(function(){
					next_pic();
				},1000)
			}
			
		</script>
	</body>
</html>

这里只要把图片地址更换一下 ，引用jquery文件就可以了

mdashjQueryspanclasstokenjavascript前端

有关用jQuery实现轮播图——超简单(代码解释)的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  3. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  4. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  5. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  6. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法

  7. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  8. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  9. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  10. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

随机推荐