自动轮播图

Posted 2020-10-16

自动轮播图已经完成，为方便大家阅览源码如下为方便大家使用，有什么不懂大家可以给我留言

<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			text-decoration: none;
			list-style-type: none;
		}
		/*切换按钮*/
		.arrow{
			width: 50px;
			height: 50px;
			color: #000;
			font-size: 30px;
			border-radius:25px ;
			background:rgba(255,255,255,0.7);
			z-index:2;
			top: 145px;
			font-weight:bold ;
			position: absolute;
			text-align: center;
			line-height: 46px;
			display: none;
		}
		#prev{
			left: 0px;
		}
		#next{right: 0px;}
		.arrow:hover{background:rgba(255,255,255,0.3);color: #4d4f08;}
		#box:hover .arrow {display: block;}
		
		/*轮播图部分*/
		#box{
			width: 900px;
			height: 400px;
			margin: 0 auto;
			position: relative;
			border: 1px solid #ccc;
		}
		#list{
			width: 100%;
			height: 350px;
			float: left;
			/*overflow: hidden;*/
			cursor: pointer;
		}
		#list img{
			width: 900px;
			height: 100%;
			float: left;
			z-index: 1;
			margin-right: -100%;
		}
		#buttons { 
			position: absolute; 
			height: 10px; 
			width: 100%; 
			z-index: 2;
			bottom: 20px; 
			
		}
		#buttons ul{
			height: 10px; 
			width: 130px; 
			margin: 0 auto;
		}
		 #buttons ul li {
		 	cursor: pointer; 
			float: left; 
			border: 1px solid #fff;
			width: 7px;
			height: 7px;
			border-radius: 50%; 
			background: #a4a3a3; 
			margin:3px 6px;
			}
		#buttons .on{background-color: #e42929;}
		 #buttons li:hover{background-color: #e42929;}

　　

<div id="box">
            <div id="list">
                <img src="img/001.jpg" alt="1" style="background-color: #ff0000;">
                <img src="img/002.jpg" alt="2"  style="background-color: #f05009;">
                <img src="img/003.jpg" alt="3"  style="background-color: #d8f009;">
                <img src="img/004.jpg" alt="4" style="background-color: #09f035;">
                <img src="img/005.jpg" alt="5"  style="background-color: #05f4f7;">
                <img src="img/006.jpg" alt="6"  style="background-color: #051cf7;">
            </div>
            <div id="buttons">
                <ul>
                    <li index="1" class="on"></li>
                    <li index="2"></li>
                    <li index="3"></li>
                    <li index="4"></li>
                    <li index="5"></li>
                    <li index="6"></li>
                </ul>
            </div>
            <a href="javascript:;" id="prev" class="arrow">&lt;</a>
            <a href="javascript:;" id="next" class="arrow">&gt;</a>
        </div>

<script>
		$(function(){
			$("#list img:gt(0)").hide()
			
			//小圆点
			$("#buttons ul li").on("click",function(){
				$(this).addClass("on").siblings().removeClass("on")
				var TheIndex=$(this).index()
				$("#list img").eq(TheIndex).fadeIn(1000).siblings().fadeOut(1000)
			})
			
			
			//左右按钮
			var i=[0]
			
			$("#next").on("click",function(){
				i++
				i=i>5?0:i
				console.log(i);
				$("#list img").eq(i).fadeIn(1000).siblings().fadeOut(1000);
				$("#buttons ul li").eq(i).addClass("on").siblings().removeClass("on");
			})
			
			$("#prev").on("click",function(){
				i--
				i= i<0?5:i
				console.log(i);
				$("#list img").eq(i).fadeIn(1000).siblings().fadeOut(1000);
				$("#buttons ul li").eq(i).addClass("on").siblings().removeClass("on");
			})
			
			//定时器功能	
			$("#box").mouseout(function(){
				
				timer=setInterval(function(){
					
					$("#next").trigger("click");
				},2000)
				
			})
			$("#box").mousemove(function(){
				clearInterval(timer)
			})
			
			
			
		})
				
			
			
	</script>