JQuery 前台的轮播图

最新推荐文章于 2022-02-08 17:42:55 发布

落子無悔

最新推荐文章于 2022-02-08 17:42:55 发布

阅读量378

点赞数 1

分类专栏： JS/JQuery 文章标签：轮播图

本文链接：https://blog.csdn.net/ruziwang/article/details/79060717

版权

JS/JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery 前台的轮播图

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#box{
			width: 400px;
			height: 230px;
			margin: 20px auto;
			border: 1px solid black;
			position:relative;
			overflow:hidden;
		}
		#box ul li{
			float: left;
			width: 400px;
			height: 230px;
		}
		#box ul li img{
			width: 100%;
			height: 100%;
		}
		#box ol{
			position: absolute;
			left: 0px;
			bottom:10px;
		}
		#box ol li{
			width: 20px;
			height: 20px;
			background:black;
			color:#fff;
			float: left;
			margin-left: 40px;
			text-align: center;
			line-height: 20px;
		}
		#num ol .bg{
			background:#fff;
			color:black;
		}
		.left{
			position: absolute;
			top:100px;
			color:#fff;
			font-size: 50px;
			font-weight: bolder;
			left: 10px;
			opacity: 0.7;
		}
		.right{
			position: absolute;
			top:100px;
			color:#fff;
			right: 10px;
			font-size: 50px;
			font-weight: bolder;
			opacity: 0.7;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="img/1.jpg" alt=""></li>
			<li><img src="img/2.jpg" alt=""></li>
			<li><img src="img/3.jpg" alt=""></li>
			<li><img src="img/4.jpg" alt=""></li>
			<li><img src="img/5.jpg" alt=""></li>
			<li><img src="img/6.jpg" alt=""></li>
		</ul>
		<div id="num">
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ol>
		</div>
		<div class='left'><</div>
		<div class='right'>></div>
	</div>
	<script src="js/jQ.js"></script>
	<script>
		$(function(){
			$("#num>ol li").eq(0).addClass("bg")
			var timer=null,
				index=0,
				len=$("#box>ul li").length,
				imgW=$("#box>ul li").width();
				$("ul").width(imgW*len);
			function autoplay(){
				timer=setInterval(function(){
						index++
						if(index>len-1){
							index=0;
							$('ul').width(imgW*(len+1))		
							//重新设置ul的宽+一个图片的宽
							$('ul li').first().clone().appendTo('ul')	
							//将第一个li复制追加到最后
							$("#box>ul").stop().animate({"margin-left":-imgW*len},1000,function(){
								$('ul li').last().remove()		
									//回调函数	将追加的li删除
								$('ul').css('margin-left',0)	
							})
							//ul的位置为0
							$('ol>li').eq(0).addClass('bg').siblings().removeClass('bg')	//ol下的第一个li添加样式
						}else{
							show();
						}
					},2000)
			}
			function show(){
				$("#box>ul").stop().animate({"margin-left":-imgW*index},1000)
				$("#num>ol li").eq(index).addClass("bg").siblings().removeClass("bg")
			}
			autoplay();
			$("#box").hover(function(){
				clearInterval(timer)
			},function(){
				autoplay()
			})
			$("#num>ol li").on("mouseover",function(){
				index=$(this).index();
				show()
			})
			$(".right").on("click",function(){
				index++
				if(index>len-1)index=0
				show()
			})
			$(".left").on("click",function(){
				index--
				if(index<0)index=len-1
				show()
			})
		})
	</script>
</body>
</html>

落子無悔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 前台的轮播图

JQuery 前台的轮播图 Document *{ margin: 0; padding: 0; list-style: none; } #box{ width: 400px; height: 230px; margin: 20px auto; border: 1px solid black; position:rela
复制链接

扫一扫

专栏目录