轮播图片代码整理：类型一：闪现 JQ+原生JS

CSS

<style>
	li{list-style: none;cursor: pointer;}
	.playWrap{width:1000px;height:400px;overflow: hidden;margin:0 auto; }
	.playWrap li{height:400px;line-height: 400px;text-align: center;font-size: 50px;display: none;}
	.navWrap{width: 200px;height: 50px; margin: 0 auto; position: relative;top: -40px;left: 400px;}
	.navWrap li{float: left;width: 20px;height: 20px; text-align: center;border:1px solid #000;border-radius: 30px;margin-left: 10px;background-color:#575757;}
	.onPlay{display: block !important;}
	.onNav{background-color: #fff !important;}
</style>

HTML

<ul class="playWrap">
	<li class="onPlay">image1</li>
	<li>image2</li>
	<li>image3</li>
	<li>image4</li>
	<li>image5</li>
</ul>
<ul class="navWrap">
	<li class="onNav">1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

JQ是这段代码

<script>
		
		//需求分析
		//1、点击小圆点显示与其索引值一致的对应的图片
		//2、图片自动定时播放时，且对应的指示圆点显示高亮
		//3、鼠标放在图片上时候图片停止播放，鼠标移开时图片继续播放
		$(document).ready(function(){

			var colorArr = ["pink","red","green","yellow","blue"];//声明一个颜色数组
			var nav = $(".navWrap").find("li");			//楼层导航
			var floor = $(".playWrap").find("li");		//楼层
			var playLength = $(".playWrap").find("li").length;
			var timer = null;
			var i = 0;
			console.log(playLength);
			for(let i=0;i<floor.length;i++){
				floor.eq(i).css("background-color",colorArr[i]);
			}
			//1、点击小圆点显示与其索引值一致的对应的图片
			nav.click(function(){
				$(".navWrap li").eq($(this).index()).addClass("onNav").siblings().removeClass("onNav");
				$(".playWrap li").eq($(this).index()).addClass("onPlay").siblings().removeClass("onPlay");
			})
			//2、图片自动定时播放时，且对应的指示圆点显示高亮
			//3、定时播放函数
			autoPlay();
				//鼠标移开时继续自动播放
			floor.on("mouseout",function(){
				autoPlay()
			})
			function autoPlay(){
				var timer = setInterval(function(){
					floor.eq(i).addClass("onPlay").siblings().removeClass("onPlay");
					nav.eq(i).addClass("onNav").siblings().removeClass("onNav");
					i++;
					if(i===playLength){
						i=0;
					}
				},1000)
				//鼠标放在上面时停止自动播放
				floor.mouseover(function(){
					clearInterval(timer);
				})
			}
			
		})
		
	</script>

原生JS是这段代码