手写轮播图，读完你也可以自己写。

最新推荐文章于 2022-05-26 17:04:20 发布

qq_28761593

最新推荐文章于 2022-05-26 17:04:20 发布

阅读量491

点赞数

分类专栏： HTML+CSS 轮播图 jq 文章标签： jq

本文链接：https://blog.csdn.net/qq_28761593/article/details/99831075

版权

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

11 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

轮播图

1 篇文章 0 订阅

订阅专栏

看了setInterval方法直接上手卢一发轮播图，还是第一次写的哈哈
主要用到：
flex：flex布局
addClass():添加样式
removeClassv移除样式
children()：获取孩子节点
eq():获取指定的第几个li
append()：向值得容器追加元素
width()：获取宽度
click()：点击事件
css():给div赋新样式
animate()：动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div,ul,li,body,html{
				list-style: none;
				margin: 0px;
				padding: 0px;
			}
			.bannner-div{
				overflow: hidden;
				width: 100%;
			}
			.bannner-div ul{
				width: 100%;
				
				
				display: -webkit-flex;
				display: flex;
				-webkit-justify-content: flex-end;
				justify-content: flex-end;
					
			}
			.bannner-div ul li{
				display: none;
				background: burlywood;
				float: left;
				text-align: center;
				font-size: 30px;
				
				width: 100%;
			}
			.banner-i{
				text-align: center;
				display: inline-block;
				width: 100%;
			}
			.banner-i i{
				font-style: initial;
				width: 10px;
				height: 10px;
				margin: 5px ;
				display: inline-block;
				background: #DEB887;
				border-radius: 100px;
			}
			.banner-i .active{
				background: #000;
			}
		</style>
	</head>
	<body>
		<div class="bannner-div">
			<ul class="bannner1">
				<li>
					1
				</li>
				<li>
					2
				</li>
				<li>
					3
				</li>
				<li>
					4
				</li>
				<li>
					5
				</li>
			</ul>
			<div class="banner-i">
			</div>
		</div>
		<script type="text/javascript">
			var number = 0;
			var len = 0;
			$(function(){
				 bannerfunction('.bannner1','',2000);
			})
			
			/**执行方法
			 * @param {Object} divname:div的class或者id
			 * @param {Object} n_name :如果需要增加可以自己写个名字来给相应的动画效果
			 * @param {Object} n_time :动画切换时间
			 */
			function bannerfunction(divname,n_name,n_time){
				var lis = $(divname).children();
				
				len = lis.length;
				//根据li数量追加i数量,并给第一个添加active
				for (var i = 0; i < len; i++) {
					if(i == 0){
						$(divname+'~div').append('<i  class="active"></i>')
					}else{
						$(divname+'~div').append('<i ></i>')
					}
				}
				var widths = $(divname).width();//指定获取放入banner的容器div
				console.log($(window).width())
				//点击i切换事件
				$(divname+'~div i').click(function() {
					$(divname+'~div i').removeClass('active');
					$(this).addClass('active');
					var nu = $(this).index()-1;
					number = nu;
					animate_banner(divname,widths)
				})
				
				$(divname).children().css('display','block')//阻止刷新弹跳
				$(divname).width(widths*len)//给ul指定宽度
				setInterval(
					function(){
						animate_banner(divname,widths)
					},
					n_time);//动画
			}
			
			/**animate动画切换
			 * @param {Object} clasname :容器class或id
			 * @param {Object} widths   :宽度
			 */
			function animate_banner(clasname,widths){
				var left = '';
				//自动给i添加点击样式
				$(clasname + '~div i').removeClass( 'active' )
				var idiv = $(clasname+'~div i').eq( number + 1 ).addClass('active');
				//如果数量小于li长度,每一次+1
				if(   number < len-1 ){
					number = number +1 ;
					left = '-' + number * widths + 'px';//距离左边负像素点.
				}else {
					//否则数量为0跳到第一个li
					number = 0
					left = '0px';//距离左边0像素点
				}
				//动画事件animate
				$(clasname).animate({marginLeft:left})
			}
		</script>
	</body>
</html>