jquery实现最简单焦点图切换

最新推荐文章于 2022-02-25 11:00:48 发布

原创最新推荐文章于 2022-02-25 11:00:48 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现轮播图的方法。通过绝对定位将多张图片重叠，并设置初始图片可见，其余图片隐藏。利用jQuery定时切换图片的显示状态，实现了图片的淡入淡出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html页面准备图片，显示其中一张，其他图片利用绝对定位重叠

<pre name="code" class="html"><body>
	<div id="focus">
		<ul >  
			<li style="display:block"><a href="" ><img src="./img/4.jpg"></a></li>  
			<li><a href=""><img src="./img/1.jpg"></a></li>  
			<li><a href=""><img src="./img/2.jpg"></a></li>  
			<li><a href=""><img src="./img/3.jpg"></a></li>  
		</ul> 
    </div> 	
</body>

2.css样式

<style type="text/css">
    body,*,ul,li{margin: 0;padding:0;list-style: none}
	#focus{
		width: 1000px;
		height: 400px;
		margin: 100px auto;
		position: relative;
	}
	#focus ul li {
		position: absolute;
		top: 0;
		left:0;
		display: none;
	}
	#focus ul li img{
		width: 1000px;
		height:400px;
	}
</style>

3.引入jquery文件，编写切换函数

<pre name="code" class="javascript"><script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>  
<script type="text/javascript"> 
$(function(){ 
	var i=0;  
	setInterval(move, 2000);  
	function move(){  
		if(i>3){  
		  i=0;  
		}else{  
	           $('#focus ul li').eq(i).fadeIn(2000).siblings('li').fadeOut(2000); 
	           i++;  
        }  
    }
});
</script>