jquery案例3-模仿京东轮播图

2021/12/8 6:19:07

编程Tag： jQuery li 轮播 top position count 京东 absolute 200px

本文主要是介绍jquery案例3-模仿京东轮播图，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.效果

2.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		* {
			margin:0px;
			padding:0px;
		}
		li {
			list-style: none;
			position: absolute;
			display: none;
		}
		li:first-child {
			display: block;
		}
		.slide {
			width: 590px;
			height: 470px;
			position: relative;
			margin:0px auto;
			margin-top:100px;
		}
		.next {
			position: absolute;
			right: -200px;
			top:200px;
		}
		.prev {
			position: absolute;
			left: -200px;
			top:200px;
		}
	</style>
</head>
<script src="jquery.js"></script>
<body>
	<div class="slide">
		<ul>
			<li><img src="./jd/1.jpg" alt=""></li>
			<li><img src="./jd/2.jpg" alt=""></li>
			<li><img src="./jd/3.jpg" alt=""></li>
			<li><img src="./jd/4.jpg" alt=""></li>
			<li><img src="./jd/5.jpg" alt=""></li>
		</ul>
		<input type="button" value="下一张" class="next">
		<input type="button" value="上一张" class="prev">
	</div>
</body>
</html>
<script>
	$(function(){
		var count=0;
		$(".next").click(function(){
			count++;
			console.log(count);
			if(count >= $(".slide li").length){
				count=0;
			}
			$(".slide li").eq(count).fadeIn().siblings().fadeOut();
		});

		$(".prev").click(function(){
			count--;
			if(count <=0 ){
				count = $(".slide li").length-1;
			}
			console.log(count);
			$(".slide li").eq(count).fadeIn().siblings().fadeOut();
		});
	});
</script>

这篇关于jquery案例3-模仿京东轮播图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jquery案例3-模仿京东轮播图

相关编程文章