轮播封装(初步简单封装)

曾经终败给现在 2022-06-03 05:44 166阅读 0赞

html:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#banner{
    			width: 500px;
    			overflow: hidden;
    		}
    		#imgs{
    			position: relative;
    			width: 3000px;
    		}
    		img{
    			width: 500px;
    		}
    		#ids{
    			position: relative;
    		}
    		.ids_item{
    			width: 10px;
    			height: 10px;
    			border-radius: 50%;
    			border: 4px solid red;
    			float: left;
    			margin-right: 20px;
    			cursor: pointer;
    		}
    	</style>
    </head>
    <body>
    	<div id="banner">
    		<div id="imgs">
    			<img src="img/jj.JPG" alt="">
    			<img src="img/jj1.JPG" alt="">
    			<img src="img/1.png" alt="">
    			<img src="img/2.png" alt="">
    			<img src="img/jj.JPG" alt="">
    		</div>
    		<div id="ids">
    			<div class="ids_item"></div>
    			<div class="ids_item"></div>
    			<div class="ids_item"></div>
    			<div class="ids_item"></div>
    		</ul>
    	</div>
    	
    	<script src="js/jquery.min.js"></script>
    	<script src="js/banner.js"></script>
    
    	<script>
    		//图片轮播初步封装
    		//注：需要自己写css样式
    		//第一个参数：id值 注：图片外面的div
    		//第二个参数：id值 注：小圆点
    		//第三个参数：每张图片暂留时间
    		//第四个参数：动画切换所需时间
    		//第五个参数：图片个数(不算最后一张图片，最后一张图片与第一张图片重复)
    		init('imgs','ids',2000,1000,500,4);
    	</script>
    </body>
    </html>

注：需要引入JQ

banner.js: