jQuery图片轮播代码实现

最新推荐文章于 2024-08-27 19:30:26 发布

iteye_13003

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量350

点赞数

分类专栏： jQuery 文章标签：乔乐共享学习永无止境每天进步一点点

本文链接：https://blog.csdn.net/iteye_13003/article/details/82584448

版权

jQuery 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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