自己写了一个旋转的幻灯片——jq

最新推荐文章于 2022-06-11 21:46:33 发布

兰锡

最新推荐文章于 2022-06-11 21:46:33 发布

阅读量161

点赞数

分类专栏：新手文章标签： jq

本文链接：https://blog.csdn.net/qq_36356539/article/details/80107849

版权

新手专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
<style type="text/css">
	*{padding: 0;margin: 0;list-style-type: none;}
	.slide {
	margin-top:100px !important;
	box-shadow: 0 0 2px #000000;
    height:500px;
    position: relative;
    width: 1000px;
    margin: 0 auto;
}
.slide li{
    position: absolute;
}
.slide li img{
    width:100%;
    height:100%;
}
.slide:hover .arrow div{opacity:1;}
.arrow{position: relative;}
.arrow div{position: absolute;top:200px;height: 80px;width: 30px;background: #000000;cursor: pointer;opacity: 0.3;z-index: 99;}
.left{left: 0;}
.right{right: 0;}
</style>
	
	<body>
		<div class="slide" id="slide">
			<ul>
				<li><img src="1.png"/></li>
				<li><img src="2.png"/></li>
				<li><img src="3.png"/></li>
				<li><img src="4.png"/></li>
				<li><img src="5.png"/></li>
			</ul>
			<div class="arrow" id="arrow">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
		


	</body>
	
	
	
</html>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var slider = document.getElementById("slide");
	var lis = slider.getElementsByTagName("li");


var json=[
	{//1
	"width":600,
	"height":400,
	"top":100,
	"left":200,
	"opacity":1,
	"z":3
	},
	{//2
	"width":480,
	"height":320,
	"top":70,
	"left":0,
	"opacity":0.6,
	"z":2
	},{//3
	"width":420,
	"height":280,
	"top":40,
	"left":50,
	"opacity":0.3,
	"z":1
	},{//4
	"width":420,
	"height":280,
	"top":40,
	"left":530,
	"opacity":0.3,
	"z":1
	},{//5
	"width":480,
	"height":320,
	"top":70,
	"left":520,
	"opacity":0.6,
	"z":2
	},
	
];


function p(){
	for (var i = 0; i < json.length; i++) {
		lis[i].style.width=json[i].width+"px";
		lis[i].style.height=json[i].height+"px";
		lis[i].style.top=json[i].top+"px";
		lis[i].style.left=json[i].left+"px";
		lis[i].style.opacity=json[i].opacity;
		lis[i].style.zIndex=json[i].z;}}
p();//调用函数给图片添加设置好的样式


function pic(flag,speed){
	if (flag=="left") {
		json.unshift(json.pop());
	} else if(flag=="right"){
		json.push(json.shift());
	}//先判断数组的变化，然后再给图片添加样式
	for (var i = 0; i < json.length; i++) {
		$(".slide ul li").eq(i).stop().animate({
			"width":json[i].width,
			"height":json[i].height,
			"top":json[i].top,
			"left":json[i].left,
			"opacity":json[i].opacity,
			"zIndex":json[i].z,
		},speed)
	}


}




$(".left").click(function(){pic("left",100);})//左滑动


$(".right").click(function(){pic("right",100);})//右滑动


})


</script>