jQuery完整的实现轮播图

ゞ浴缸里的玫瑰 2023-01-17 07:51 79阅读 0赞

# jQuery完整的实现轮播图功能 #

1.自动轮播，图片改变和箭头影藏。

2.鼠标移动到图片中，按钮显示，点击箭头，图片和按钮都改变。

3.鼠标触碰按钮，图片改变。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3cTE1MTgzNDY4NjQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3cTE1MTgzNDY4NjQ_size_16_color_FFFFFF_t_70 1][]

### adver.html ###

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title> 广告图片轮播切换</title>
        <link rel="stylesheet" href="css/style.css">
    	<script src="../js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
    <div class="adver">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div class="arrowLeft"><</div><div class="arrowRight">></div>
    </div>
    <script type="text/javascript">
    	var photo=["adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"];
    	//下标
    	var index=0;
    	var a;
    	/* 鼠标移入div显示箭头，鼠标移出div箭头隐藏 */
    	$(".adver").mouseover(function() {
    			$(".arrowRight").show();
    			$(".arrowLeft").show();
    			//清除定时器
    			window.clearInterval(a);
    	}).mouseout(function () {
    		$(".arrowLeft").hide();
    		$(".arrowRight").hide();
    		//开启定时器
    		a=window.setInterval(start,1000);		
    	})
    	/* 鼠标点击右边箭头 */
    	 $(".arrowRight").click(function () {
    		index++;
    		if(index>=photo.length){
    			index=0;
    		}
    		$(".adver").css("background","url(images/"+photo[index]+")");
    		$(".adver ul li").eq(index).css("background", "orange").siblings().css("background", "black");		
    	})	
    	/* 鼠标点击左边箭头 */
    	$(".arrowLeft").click(function () {
    		index--;
    		if(index<0){
    			index=photo.length-1;
    		}		
    		$(".adver").css("background","url(images/"+photo[index]+")");
    		$(".adver ul li").eq(index).css("background", "orange").siblings().css("background", "black");				
    	})
    	/* 鼠标触碰按钮 */
    	$(".adver ul li").mouseover(function () {		
    		index=$(this).text()-1;
    		$(".adver").css("background","url(images/"+photo[index]+")");
    		$(this).css("background", "orange").siblings().css("background", "black");		
    	})
    	/* 向右自动轮播 */
    	function start () {
    		index++;
    		if(index>=photo.length){
    			index=0;
    		}
    		$(".adver").css("background","url(images/"+photo[index]+")");
    		$(".adver ul li").eq(index).css("background", "orange").siblings().css("background", "black");	
    	}
    	/* 开启向右，隔一秒自动轮播 */
    	 a=window.setInterval(start,1000);
    		
    </script>
    </body>
    </html>

### css ###

ul,li{padding: 0;margin: 0; list-style: none;}
    .adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
    ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
    ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "΢���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
    .arrowLeft,.arrowRight{
        position: absolute;
        width: 30px;
        background:rgba(0,0,0,0.2);
        height: 50px;
        line-height: 50px;
        text-align: center;
        top:200px;
        z-index: 150;
        font-family: "΢���ź�";
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        display: none;
    }
    .arrowLeft{left: 10px;}
    .arrowRight{right: 10px;}
    li:nth-of-type(1){
        background: orange;
    }

### 导入js ###

![20210427205930740.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3cTE1MTgzNDY4NjQ_size_16_color_FFFFFF_t_70]: /images/20221021/b3eb8c6110814d09991dae683b615625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3cTE1MTgzNDY4NjQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/c8f1faf531314307a809059170bfe731.png
[20210427205930740.png]: /images/20221021/0f74e9afc6b248f1a429e85ed56dfc69.png