JS 简单的轮播特效示例

最新推荐文章于 2021-05-30 22:24:02 发布

袁忠

最新推荐文章于 2021-05-30 22:24:02 发布

阅读量446

点赞数

分类专栏： HTML + CSS JS JQUERY

本文链接：https://blog.csdn.net/u010168409/article/details/40596615

版权

HTML + CSS 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

JS JQUERY

28 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>html模板</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">
		<script type="text/javascript" src="f:/java/js/jquery.js"> </script>
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			.box{width:100%;height:450px;margin:0 auto;position:relative;z-index:0;}
			.box .pic{width:100%;height:450px;position:absolute;top:0;left:0;}
			.box .sel{width:120px;height:22px;position:absolute;bottom:10px;left:47%;border-radius:25px;background:rgba(0,0,0,.5);z-index:2;}
			.box .sel ul{margin-top:3px;margin-left:20px;display:inline-block;}
			.box .sel ul li{list-style:none;float:left;padding:0 5px;width:16px;height:16px;background:url('1.png') no-repeat center;cursor:pointer;}
			.box .sel .focus{width:16px;height:16px;background:url('2.png') no-repeat center;}
		</style>

	</head>
<body>

	<div class="box">
		<div class="pic" style="background:url('1.jpg') no-repeat center"></div>
		<div class="pic" style="background:url('2.jpg') no-repeat center"></div>
		<div class="pic" style="background:url('3.jpg') no-repeat center"></div>
		<div class="sel">
			<ul>
				<li class="focus"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>

<script type="text/javascript"> 

	var mysetInterval = null;
	var s = 1;
	$(function(){
		$(".box").find("li").mouseover(function(){
			var _index = $(this).index();
			$(this).addClass("focus").siblings().removeClass("focus");
			$(".pic").css({"z-index":0,opacity:0})
			$(".pic").eq(_index).stop().css({"z-index":1}).fadeTo('slow',1)
			clearInterval(mysetInterval);
		},function(){
			play();
		});
		play();	
	});
	function play(){
		mysetInterval = setInterval(function(){
			if(s>3){
				s = 2;
			}
			$(".box").find("li").eq(s).addClass("focus").siblings().removeClass("focus");
			$(".pic").css({"z-index":0,opacity:0});
			$(".pic").eq(s).stop().css({"z-index":1}).fadeTo('slow',1);
			if(s==2){
				s=0;
			}else{
				s++;
			}
		},4000);
	}

</script>
</body>
</html

袁忠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 简单的轮播特效示例

html模板 *{margin:0;padding:0;} .box{width:100%;height:450px;margin:0 auto;position:relative;z-index:0;} .box .pic{width:100%;height:450px;position:absolute;top:0;left:0;} .b
复制链接

扫一扫