【练习】js实现两种轮播图效果

最新推荐文章于 2022-04-10 17:27:37 发布

皮皮潇冲冲冲

最新推荐文章于 2022-04-10 17:27:37 发布

阅读量169

点赞数

分类专栏：前端练习项目文章标签： js css html jquery

本文链接：https://blog.csdn.net/weixin_46303867/article/details/107595620

版权

前端练习项目专栏收录该内容

8 篇文章 1 订阅

订阅专栏

js轮播图

隐藏式轮播图
滑动式轮播图
结语

隐藏式轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播特效</title>
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			img{display: block;}
			#box{
				width: 810px;
				height: 340px;
				margin: 0 auto;
				padding: 5px;
				position: relative;
			}
			#tabList{
				position: absolute;
				left: 340px;
				bottom: 30px;
			}
			#tabList span{
				float: left;
				margin-right: 20px;
				height: 8px;
				width: 30px;
				border-radius: 3px;
				background-color: white;
				text-align: center;
			}
			#tabList span.current{
				background-color: #FFA500;
			}
		</style>
	</head>
	
	<body>
		
		<div id="box">
			<nav id="tabList"></nav>
			<div id="tabCont">
				<a href="#"><img src="img/1.jpeg" ></a>
				<a href="#"><img src="img/2.jpeg" ></a>
				<a href="#"><img src="img/3.jpeg" ></a>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				//初始化
				var num = $("#tabCont a").size();
				for(var i=0;i<num;i++){
					$("#tabList").append("<span></span>")
				}
				$("#tabList span:first").addClass("current");
				$("#tabCont a:gt(0)").hide();
				//鼠标点击
				$("#tabList span").mousedown(function(){
					$(this).addClass("current").siblings().removeClass("current");
					var index=$(this).index();
					$("#tabCont a").eq(index).show().siblings().hide();
					
			
				})
				//自动切换
				function autoPlay(){
					auto=setInterval(function(){
						var now=$(".current").index();
						var next;
						if(now==num-1){
							next=0;
						}else{
							next=now+1;
						}
						$("#tabList span").eq(next).mousedown();
					},3000)
				}
				autoPlay();
				//鼠标悬浮在图片上停止切换
				$("#tabCont").hover(function(){
					clearInterval(auto);
				},function(){
					autoPlay();
				})
				$("#tabList span").hover(function(){
					clearInterval(auto);
				},function(){
					autoPlay();
				})
			})
			
		</script>
	</body>
	
	</html>

滑动式轮播图

<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title>轮播特效</title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				font-size: 0;
			}
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li{
				list-style-type: none;
			}
			#loop{
				height: 340px;
				width: 820px;
				display: flex;
				overflow: hidden;/* //实则有个滚动条 被隐藏了 */
			}
			
			.mian{
				width:820px;
				height: 380px;
				
				
			}
			#option>a{
				width: 164px;
				
				text-decoration: none;
				text-align: center;
				display: inline-block;
				font-size: 14px;
			}
			.unchoose{
				background-color: #e3e2e2;
				color: #424242;line-height: 40px;
			}
			.choose{
				background-color: #f7f6f6;
				color:#c59b66;
				line-height: 38px;
				border-bottom: 2px solid #cea861;
			}
			
		</style>
	</head>
	<body>
		<div class="mian">
			
				<ul id="loop">
					<li><a href="#"><img src="img/1.jpeg" ></a></li>
					<li><a href="#"><img src="img/2.jpeg" ></a></li>
					<li><a href="#"><img src="img/3.jpeg" ></a></li>
					<li><a href="#"><img src="img/4.jpeg" ></a></li>
					<li><a href="#"><img src="img/5.jpeg" ></a></li>
				</ul>
				<nav id="option">
					<a class="choose" href="#">1</a>
					<a class="unchoose" href="#">2</a>
					<a class="unchoose"href="#">3</a>
					<a class="unchoose"href="#">4</a>
					<a class="unchoose"href="#">5</a>
				</nav>
		</div>
		<script type="text/javascript">
			
			var index=1;
			var width=820;
			
			function move(){
				//动画开始时候把所有的选项卡设置为unchoose
				$("#option>a").attr("class","unchoose")
				//第一次取index的值为一即第二个按钮的类设为choose
				$("#option>a").eq(index).attr("class","choose");
				//index++代表吧值取出来做运算 再自增
				var distance = (index++*width)+"px";
				if(index==5)
					index=0;
				
				$("#loop").animate({"scrollLeft":distance},200);
			}
			//scrollLeft：distance移动滑块的距离 200ms代表滚动时间
			//设置一个定时器，过3000ms去调用move这个函数
			//周期性  动画三秒后开始  开始之前默认第一个 即index=0
			//将定时器付给一个变量
			var timer =setInterval(move,3000);
			//仅一次
			//setTimeout(move,3000);
			//鼠标悬停时 计时器停止 图片显示悬停处的图片
			$("#option>a").mouseover(function(){
				//获取当前的index
				index=$(this).index();
				//以当前index的值 立即执行move
				move();
				//关闭计时器
				
			});
           $("#loop").hover(function(){
	clearInterval(timer);
	},function(){
		move();
	})
	

		</script>
	</body>
	</html>