详细步骤注释jq写幻灯片

最新推荐文章于 2022-06-06 21:45:29 发布

温L

最新推荐文章于 2022-06-06 21:45:29 发布

阅读量878

点赞数 1

文章标签： css css3 html javascript html5

本文链接：https://blog.csdn.net/lwf0829/article/details/121307339

版权

实现的功能：

1.幻灯片自动播放

2.当幻灯片更换时对应的图片数字也变化，点击数字显示对应的图片

3.当点击上一张下一张显示对应的幻灯片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.swiper{
			width: 586px;
			height: 150px;
			position: relative;
		}
		.slider{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top:0;
			display: none;
		}
		img{
			width: 586px;
			height: 150px;
		}
		.slider:nth-of-type(1){
			display: block;
		}
		.thumbs{
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.thumb{
			padding: 5px;
		}
		.active{
			color: red;
			font-weight: 700;
		}
		.controls{
			position: absolute;
			right: 0;
			bottom: 0;
		}
	</style>
	</head>
	<body>
		<div class="swiper">
			<!-- 图片 可根据自己的图片进行更换 -->
			<div class="slider">
				<img src="./img/banner_1.jpg" >
			</div>
			<div class="slider">
				<img src="./img/banner_2.jpg" >
			</div>
			<div class="slider">
				<img src="./img/banner_3.jpg" >
			</div>
			<div class="slider">
				<img src="./img/banner_4.jpg" >
			</div>
			<!-- 序号 -->
			<div class="thumbs">
				<button type="button" class="thumb active">1</button>
				<button type="button" class="thumb">2</button>
				<button type="button" class="thumb">3</button>
				<button type="button" class="thumb">4</button>
			</div>
			<!-- 上一张下一张 -->
			<div class="controls">
				<button type="button" class="prev">上一张</button>
				<button type="button" class="next">下一张</button>
			</div>
		</div>
	</body>
    //JQ
	<script type="text/javascript">
		$(function(){
			
			var index=0 //第0张显示
			// 获取所有幻灯片
			var sliders=$(".swiper .slider")
			// 执行幻灯片
			function play(){
				// 有可见的图片淡出
				$(".swiper .slider:visible").fadeOut()
				// 拥有active样式的类，删除这个类 就是指更换图片时数字发生变化
				$(".thumb.active").removeClass("active")
				// 当图片等于几时对应的图片显示出来
				sliders.eq(index).fadeIn();
				// 对应的数字也添加active这个类的样式
				$(".thumbs .thumb").eq(index).addClass("active")
			}
			
			// 改变index执行play方法就能实现幻灯片的切换
			// 停止调用
			var ind=null;
			function auto(){
				// 每隔3s图片张数就加一并调用play()方法
				ind=setInterval(function(){
					index++
					checkIndex()
					play()
				},3000)
			}
			
			// 检测index的正确
			function checkIndex(){
				// 如果小于0 等于长度-1
				if(index<0){index=sliders.length-1}
				// 如果大于长度-1 等于0
				if(index>sliders.length-1){
					index=0
				}
			}
			// 调用auto
			auto();
			
			// 鼠标移入停止播放，移出开始播放
			$(".swiper").hover(
			function(){
				clearInterval(ind)
			},
			function(){auto()}
			)
			
			// .thumbs数字的指示 点数字几显示对应的图片
			$(".thumbs .thumb").click(function(){
				// 获取元素的索引值并赋值 调用执行幻灯片
				index=$(this).index();
				play()
			})
			// 点击下一张张数就+1 并调用play（）
			$(".next").click(function(){
				index++
				checkIndex()
				play()
			})
			// 点击上一张张数就-1 并调用play（）
			$(".prev").click(function(){
				index--;
				checkIndex()
				play()
			})
		})
	</script>
</html>

用到知识点：

1.定位：

定位  ：position
    值: static   默认  不定位
     relative   相对定位    相对于元素原来位置
     absolute  绝对定位   当包含框无定位，相对于浏览器定位；当包含框有定位，相对于离自己最近的有定    位的包含框定位
     fixed      固定定位    始终相对于浏览器定位
     sticky     粘性定位    是position:relative与position:fixed结合的一种特殊定位

2.伪类选择器：

伪类选择器
    ：focus 聚焦状态
    ui伪类状态选择器：
        ：checked 选择选中状态的元素
        :disable{}不可用状态下的元素
        ：enabled 选择可用状态的元素

    ：first-child 选择某个父元素下第一个子元素
    ：last-child 选择某个父元素下最后一个子元素
    ：nth-child(n)选择某个父元素下第N个子元素
    odd(第奇数个)
    even(第偶数个)
    :first-of-type 同种元素里的第一个元素
    :last-of-type同种元素里的最后一个元素
    nth-of-type(n) 同种元素第n个元素
    ：not()除了括号里的
    :not(nth-of-type(n)) 除了第N个
    ::first-letter 第一个字母
    ::first-line 第一行样式
    ::selection 改变选中文本的样式

3. jq

选择器 :visible 可见元素

筛选：.eq() 获取当前操作的参数，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个

.removeClass()删除类

.addClass()添加类

.fadeIn() 淡入

.click()点击事件

4.计时器：

setInterval(参数1，参数2)
参数1：待执行的Js代码串或调用的函数
参数2：间隔时间 单位毫秒
在外面调用
清除计时器
	clearInterval();

ps:

如果使用的话可根据自己样式图片进行设置哦

--方法总比困难多--

温L

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详细步骤注释jq写幻灯片

实现的功能： 1.幻灯片自动播放 2.当幻灯片更换时对应的图片数字也变化，点击数字显示对应的图片 3.当点击上一张下一张显示对应的幻灯片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jq...
复制链接

扫一扫