简易轮播图

最新推荐文章于 2023-02-02 16:45:52 发布

歪你挡着我发光了

最新推荐文章于 2023-02-02 16:45:52 发布

阅读量599

点赞数

文章标签： css3 css javascript html

本文链接：https://blog.youkuaiyun.com/qq_53523338/article/details/121651597

版权

简易轮播图效果:
4张图片间隔一秒，依次呈现，鼠标在按钮悬停，可更改至指定图片
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		    .main {
		        width: 350px;
		        height: 300px;
		        overflow: hidden;
		        position: relative;
		    }
		
		    ul li {
		        list-style: none;
		    }
		
		    .main ul#picid img {
		        width: 350px;
		        height: 300px;
		        border: 1px solid red;
		    }
		
		    .main #numid {
		        position: absolute;
		        left: 10px;
		        bottom: 5px;
		    }
		
		    .main ul#numid li {
		        width: 17px;
		        height: 17px;
		        border: 1px solid blue;
		        background-color: white;
		        color: blue;
		        font-size: 14px;
		        float: left;
		        margin-left: 8px;
		        text-align: center;
		        line-height: 17px;
		    }
		    .active {
		        color: pink;
		        background-color: pink;
		        cursor: pointer;
		        font-weight: bold;
		    }
		</style>
		<!-- 
		 type：JavaScript告诉浏览器："我是 js文件"  H5之后可以不写，不影响
		 src:引用在线：src="http://code.jquery.com/jquery-latest.js"
			 引用本地：本地文件
		-->
		
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
		<script>
		$(function(){
			//目的 要求鼠标移到上方就改变图片
			var flag=false;
			// 自动轮播图的索引值
			var time=0;
			
			//获取id下的li的对象数组
			var pic=$("#picid").children("li");
			var num=$("#numid").children("li");
			
			//鼠标方法上就会触发这个函数
			
			num.mouseover(function(){
				//鼠标在按钮上悬浮判断 true 
				flag=true;
				//获取当前鼠标选择的对象的索引
				var index=num.index($(this));
				
				//获取了index传给图片进行更改相对应的索引值
				pic.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
				num.eq(index).addClass("active").stop(true,true).siblings().removeClass("active");
				
			
		
			num.mouseout(function(){
					flag=false;
					
						
				})
			})	
		setInterval(function(){
			//是true之后停止轮播，直接返回return结束函数
			if(flag==true){
				return;
			}
			time++;
			
			//判断索引是否小于<4 大于4就归0，重新循环
			if(time<4){
				pic.eq(time).stop(true,true).fadeIn().siblings().fadeOut();
				num.eq(time).addClass("active").stop(true,true).siblings().removeClass("active");
			}else{
				time=0;
				pic.eq(time).stop(true,true).fadeIn().siblings().fadeOut();
				num.eq(time).addClass("active").stop(true,true).siblings().removeClass("active");
			}
			
		},1000);
		
	/* 
	总结:
	淡入浅出效果来显示被选元素：fadeIn()、fadeOut()
		fadeIn(speed,callback)： speed ： 可选。规定元素从隐藏到可见的速度  callback：可选。fadeIn 函数执行完之后，要执行的函数。
		
		siblings()函数用于选取每个匹配元素的所有同辈元素(不包括自己)，并以jQuery对象的形式返回
		
		addClass（）方法，增加样式、用于动态增加class类名
		
		removeClass（）方法、删除样式、，用于动态删除class类名
		
		
	
		1、明确自己每一步都要实现的目的是什么
		2、明白每一行的返回值和返回值类型
		3、写注释是一个好习惯
		4、第二次复习写，还算顺利，自己的思路写下的不同于模板，碰到bug不应该烦躁，我想我应该会是一个不错的问题解决者
	 */
		
		})
		</script>

				

	</head>
	<body>
		<div class="main">
		    <ul id="picid">
		        <li><a href=""><img src="images/list1.jpg" alt="" /></a></li>
		        <li><a href=""><img src="images/list2.jpg" alt="" /></a></li>
		        <li><a href=""><img src="images/list3.jpg" alt="" /></a></li>
		        <li><a href=""><img src="images/list4.jpg" alt="" /></a></li>
		    </ul>
		    <ul id="numid">
		        <li>1</li>
		        <li>2</li>
		        <li>3</li>
		        <li>4</li>
		    </ul>
		</div>
	</body>
</html>