自动轮播js轮播图简单实用！！！

最新推荐文章于 2023-02-02 16:45:52 发布

michaelmiss

最新推荐文章于 2023-02-02 16:45:52 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/weblhy/article/details/78079434

版权

这篇文章主要介绍了js图片自动轮播代码，利用图片width显示位置来播放图片和... 需要的朋友可以参考下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/index.css" />
    <script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/index.js"></script>
</head>
<body>

<div class="content">
	<div class="sliderFrist">
		<ul>
			<li><a href=""><img src="images/index.jpg" alt=""></a></li>
			<li><a href=""><img src="images/index1.jpg" alt=""></a></li>
			<li><a href=""><img src="images/index2.jpg" alt=""></a></li>
		</ul>
	</div>
	<div class="sliderLast">
		<ul>
			<li class="active"></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>


</body>
</html>

* { 
	padding:0;
	margin: 0;
	list-style:none;
}
.sliderFrist {
	width:1440px;
	height:366px;
	overflow: hidden;
	margin: 10px auto;
}
.sliderFrist ul {
	width:4320px;
	position: relative;
}
.sliderFrist ul li {
	float: left;
}
.sliderLast {
	width:500px;
	height:50px;
}
.sliderLast ul {
	
}
.sliderLast ul li {
	width:65px;
	height:8px;
	background-color: #a8a8a8;
	position: relative;
	display: inline-block;
	top:-40px;
	left:510px;
	margin-right:20px;
}

.sliderLast .active {
	background-color: #000;
}

$(function(){
	var sliderLast = $(".sliderLast ul li");
	var sliderFrist=$(".sliderFrist ul li");
	var  sliderFristUl= $(".sliderFrist ul");
	var slderWidth=sliderFrist.eq(0).width();
	//用来计数
	//siblings（）消除被选元素的同胞元素
	var count=0;
	var time=null;
	sliderLast.on('click',function(){
		$(this).addClass('active').siblings().removeClass('active');
		var index =$(this).index();
		count=index;
		sliderFristUl.animate({"left":-count*slderWidth});

	})
	time =setInterval(function(){
		count++;
		if(count>sliderLast.length-1){
			count=0;
		}
		// trigger()触发某个事件
		sliderLast.eq(count).trigger('click');
	},2000)
})