jquery轮播图_轮播图sdn-优快云博客

本文链接：https://blog.youkuaiyun.com/a2QWSDN/article/details/89479095
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>轮播图</title>
</head>

<style>
	*{
		margin:0;
		padding: 0;
		list-style:none;
	}
	.banner{
		width:590px;
		height:470px;
		position: relative;
		margin:0 auto ;
	}
	.bannerImg{
		width: 590px;
		height:470px;
		position: relative;

	}
	.bannerImg a {
		width: 590px;
		height: 470px;
		position: absolute;
		top:0;
		left: 0;
	}
    .items{
    	width: 180px;
    	height: 20px;
    	position: absolute;
    	bottom:20px;
    	left: 280px;
    }
    .item{
    	width: 18px;
    	height: 18px;
    	float:left;
    	margin-left: 10px;
    	background:white;
    	border-radius:50%;
    	text-align:center;
    	line-height:18px;
    }
    .bot{
    	width: 730px;
    	height: 100px;
    	
    	position: absolute;
    	top: 200px;
    }
    .left{
     width: 60px;
     height: 80px;
     line-height:80px;
     font-size:30px;
     font-weight:bold;
     float: left;
     background: yellow;
    }
    .right{
      width: 60px;
     height: 80px;
     line-height:80px;
     font-size:30px;
     font-weight:bold;
     float: right;
     background: yellow;
     text-align:right;
    }
</style>
<body>
	<div class="banner">
		<div class="bannerImg" style="z-index:99">
		<a href=""><img src="1.jpg" width:
		"590" height: "470" alt="" /></a>
		<a href=""><img src="2.jpg" alt="" / width:
		"590" height: "470"></a>
		<a href=""><img src="3.jpg" alt=""  width:
		"590" height: "470"/></a>
		<a href=""><img src="4.jpg" alt=""  width:
		"590" height: "470"/></a>
		<a href=""><img src="5.jpg" alt="" width:
		"590" height: "470"/></a>
		</div>
		<ul class="items" style="z-index:99">
			<li class="item">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
			<li class="item">4</li>
			<li class="item">5</li>
		</ul>
         <div class="bot" style="z-index:99">
         	<div class="left">&gt;</div>
         	<div class="right">&lt;</div>
         </div>
	</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	var num=0;
	function fl(address){
  
        if(address=="r"){
        	num++;
        	if(num==$("a").length){
        		num=0
        	}
        }else if(address=="l"){
        	num--;
        	if(num<0){
        		num=$("a").length-1
        	}
        }

		$("a").hide();
		$(".item").css("background","#fff");
		$("a").eq(num).show(); 
                    //让它作为图片li的下标
		$(".item").eq(num).css("background","pink");
                    //让num 作为item每一个字符的下标

       
	}
	var time=setInterval(function(){
         fl("r")
	},1000)
       //自动轮播

    
       $(".item").hover(
       function(){
        clearInterval(time)
       },
       function(){
        time=setInterval(function(){
    f1("r")
   },1000)
       }
        )
        //鼠标移上去，清楚时间函数。移开。继续轮播

    $(".item").click(function(){
    	var index=$(this).index();
    	        $("a").hide();
		$(".item").css("background","#fff");
		$("a").eq(indx).show();
                   //index作为图片的每一个下标
		$(".item").eq(index).css("background","pink");
                   //index作为li的每一个下标
        num=index;
        //下标相等
         
    })
    

 

    $(".left").click(function(){
    	fl("l")
    })
     
     
    $(".right").click(function(){
    	fl("r")
    })
</script>
</html>