<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#big{
position: relative;
width: 940px;
height: 430px;
margin: 0 auto;
}
#small{
float: left;
width: 200px;
height: 50px;
margin-top: 380px;
margin-left: 370px;
z-index: initial;
}
.yuan{
float:left;
width: 20px;
height: 20px;
border-radius: 50%;
margin-top: 15px;
margin-left: 25px;
}
#big>img{
position: absolute;
left: 0;
z-index: -1;
}
</style>
<body>
<div id="big">
<img src="img/img0.jpg" >
<div id="small">
<div class="yuan"></div>
<div class="yuan"></div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let i=0
function changImg(){
i%=4
$('#big>img').attr('src',`img/img${i}.jpg`).fadeOut(500).fadeIn(500)
$('.yuan').css({
'background-color':'green'
})
$(`#small>div:eq(${i})`).css({
'background-color':'red'
})
i+=1
}
let timeId=setInterval(changImg,2000)
$('#big').on('mouseover',()=>{
clearInterval(timeId)
})
$('#big').on('mouseout',()=>{
timeId=setInterval(changImg,2000)
})
for(let j=0;j<4;j+=1){
$(`#small>div:eq(${j})`).on('mouseover',(evt)=>{
$('#big>img').attr('src',`img/img${j}.jpg`).fadeOut(500).fadeIn(500)
$('.yuan').css('background-color','green')
$(evt.target).css('background-color','red')
})
}
</script>
</body>
</html>
阶段二day07-作业
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 20天帮助孩子走出叛逆 第十阶段作业 作业一 评估你的积极转变 问：你在这十个阶段中哪些方面做出了积极的转变，并列...
- 10年后两个宝贝21了，他们已考入理想的大学，正在读大三，学着他们喜欢的专业。他们穿梭于教室、图书馆、学生会等场所...
