jQuery图片轮播代码实现

最新推荐文章于 2023-12-20 17:27:12 发布

原创最新推荐文章于 2023-12-20 17:27:12 发布 · 381 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #学习永无止境 #每天进步一点点

jQuery 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS及JavaScript实现一个简单的轮播图效果。通过设置图片的显示与隐藏状态，配合定时器自动切换及手动点击切换功能，为用户提供了一种直观的轮播图制作方法。

Css实现：

#hero img{
	width: 100%;
	height: 100%;
}
#hero div{
	position: absolute;
	top: 0px; 
	left: 0px; 
	display: none; 
	z-index: 5; 
	opacity: 0; 
	width: 645px; 
	height: 590px;
}
#hero-pager {
	z-index: 2;
	text-align: center;
	margin: 20px 0;
}
#hero-pager a {
	margin: 0 4px;
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 14px;
	text-indent: -3000em;
	background-color: #D0D0D0;
	vertical-align: middle;
}
#hero-pager a.activeSlide {
	width: 21px;
	height: 21px;
	border-radius: 21px;
	background-color: #85C637;
}

Html实现：

<div id="hero" style="display: table-cell;position: relative; width: 645px; height: 590px;">
			<div>
				<img src="https://www.yapp.us/images/home/hero/derek.jpg" />
			</div>
			<div>
				<img src="https://www.yapp.us/images/home/hero/julie.jpg" />
			</div>
			<div>
				<img src="https://www.yapp.us/images/home/hero/dan.jpg" />
			</div>
			<div>
				<img src="https://www.yapp.us/images/home/hero/wojtek.jpg" />
			</div>
			<div>
				<img src="https://www.yapp.us/images/home/hero/caitlin.jpg" />
			</div>
		</div>
		<div class="hero-controls">
		  <div id="hero-pager">
		  <a href="#" class="activeSlide">*</a><a href="#" class="">*</a><a href="#">*</a><a href="#" class="">*</a><a href="#" class="">*</a></div>
		</div>

Js实现：

var curIndex = 0;
setInterval(function(){
	curIndex = (curIndex >= $("#hero-pager a").size() ? 0 : curIndex);
	$("#hero-pager a").removeClass("activeSlide").eq(curIndex).addClass("activeSlide");
	$("#hero div").css({"display":"none","z-index":"5","opacity":"0"}).eq(curIndex).css({"display":"block","z-index":"6","opacity":"1"});
	
	curIndex++;
}, 3000);

$("#hero-pager a").hover(function(){
	$("#hero-pager a").removeClass("activeSlide");
	$(this).addClass("activeSlide");
	curIndex = $("#hero-pager a").index(this);
	$("#hero div").css({"display":"none","z-index":"5","opacity":"0"}).eq(curIndex).css({"display":"block","z-index":"6","opacity":"1"});
}).click(function(){
	$("#hero div").css({"display":"none","z-index":"5","opacity":"0"}).eq(curIndex).css({"display":"block","z-index":"6","opacity":"1"});
	return false;
});

Demo：http://each.sinaapp.com/vtec/home.html