<!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>
作业20-点击轮播
最新推荐文章于 2023-08-14 22:49:05 发布