作业20-点击轮播

最新推荐文章于 2023-08-14 22:49:05 发布

原创最新推荐文章于 2023-08-14 22:49:05 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用HTML、CSS和jQuery实现的广告图片轮播切换功能，通过鼠标悬停显示左右箭头进行图片切换，并提供了点击小圆点更换背景图片的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>广告图片轮播切换</title>
		<style>
			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; 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;
}
		</style>
	</head>
	<body>
<div class="adver">
    <ul>
        <li onclick="change("adver01.jpg")">1</li>
        <li  onclick="change("adver02.jpg")">2</li>
        <li  onclick="change("adver03.jpg")">3</li>
        <li  onclick="change("adver04.jpg")">4</li>
        <li  onclick="change("adver05.jpg")">5</li>
        <li  onclick="change("adver06.jpg")">6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>

</body>


<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" >
	
	
	

$(document).ready(function(){
    var img=Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
    var flag=0;
    $(".adver").css("background","url(img/"+img[flag]+")");
    $(".arrowRight").click(function(){
        if(flag==img.length-1){alert("已经是最后一张图片了");}
        else{
            flag++;
            var i=flag+1;
            $(".adver").css("background","url(img/"+img[flag]+")");
            $("li:nth-of-type("+i+")").css("background","orange");
            $("li:nth-of-type("+i+")").siblings().css("background","#333333");
        }
    });

    $(".arrowLeft").click(function(){
        if(flag==0){alert("这是第一张图片了");}
        else{
            flag--;
            var i=flag+1;
            $(".adver").css("background","url(img/"+img[flag]+")");
            $("li:nth-of-type("+i+")").css("background","orange");
            $("li:nth-of-type("+i+")").siblings().css("background","#333333");
        }
    });
    $(".adver").mouseover(function(){
        $(".arrowRight").show();
        $(".arrowLeft").show();
    }).mouseout(function(){
        $(".arrowRight").hide();
        $(".arrowLeft").hide();
    })

});
function change(dd){
    var p=document.getElementById("photo");
    p.setAttribute("src","img/"+dd);
}
</script>
</body>

		
	
</html>