轮播图

柔情只为你懂 2021-11-23 13:56 626阅读 0赞

**## CSS样式**
    
    			*{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    			div{
    				width: 300px;
    				height: 300px;
    				position: relative;
    				border: 1px solid gray;
    				margin-left: 250px;
    				overflow: hidden;
    			}
    			ul{
    				width: 1500px;
    				height: 300px;
    				position: absolute;
    			}
    			ul>li{
    				width: 300px;
    				height: 300px;
    				float: left;
    			}
    			ul>li>img{
    				width: 100%;
    				height: 100%;
    			}
    			button{
    				position: absolute;
    				top: 120px;
    				border: none;
    				width: 50px;
    				height: 80px;
    				background: rgba(120,120,120,0.6);
    				display: none;
    				color: orange;
    				font-size: 22px;
    			}
    			button:nth-of-type(1){
    				left: 0;
    			}
    			button:nth-of-type(2){
    				right: 0;
    			}
    			ol{
    				position: absolute;
    				bottom: 10px;
    				width: 100%;
    				display: flex;
    				justify-content: space-around;
    			}
    			ol>li{
    				width: 15px;
    				height: 15px;
    				border-radius: 50%;
    				background: white;
    			}
    	
    
    ## HTML代码
    
    		<div>
    			<ul>
    				<li><img src="img/WuTa_2019-02-25_18-27-57.jpg" ></li>
    				<li><img src="img/WuTa_2019-02-25_18-33-14.jpg" ></li>
    				<li><img src="img/WuTa_2019-02-25_18-33-21.jpg" ></li>
    				<li><img src="img/WuTa_2019-03-16_20-12-13.jpg" ></li>
    				<li><img src="img/WuTa_2019-02-25_18-27-57.jpg" ></li>
    			</ul>
    			<ol>
    				<li style="background: #FF0000;"></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ol>
    			<button>prev</button>
    			<button>next</button>
    		</div>
    
    ## js代码
    		var timer
    		var index = 0
    		$(function(){
    			$("button").eq(1).click(function(){
    				$("ul").stop(true,true)
    				index++
    				if(index>3){
    					index=0
    				}
    				if($("ul").position().left<=-1200){
    					$("ul").css("left","0")
    				}
    				$("ul").animate({"left":"-=300px"},500)
    				yuan()
    			})
    			$("button").eq(0).click(function(){
    				index--
    				if(index<0){
    					index = 3
    				}
    				$("ul").stop(true,true)
    				if($("ul").position().left>=0){
    					$("ul").css("left","-1200px")
    				}
    				$("ul").animate({"left":"+=300px"},500)
    				yuan()
    			})
    		})
    		var bian = function(){
    			index++
    			if(index>3){
    				index=0
    			}
    			$("ul").stop(true,true)
    			if($("ul").position().left<=-1200){
    				$("ul").css("left","0")
    			}
    			$("ul").animate({"left":"-=300px"},500)
    			yuan()
    		}
    		//动画自动轮播
    		timer = setInterval(bian,2000)
    		$("div").hover(function(){
    			clearInterval(timer)
    			// 圆点点击
    			$("ol>li").click(function(){
    				$(this).css("background","red").siblings().css("background","white")
    				index =$(this).index()
    				$("ul").stop().animate({'left':index*-300+"px"},500)
    			})
    			$("button").fadeIn(300)
    		},function(){
    			timer= setInterval(bian,2000)
    			$("button").fadeOut(300)
    		})
    		
    		function yuan(){
    			$("ol>li").eq(index).css("background","red").siblings().css("background","white")
    		}