<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#picd1{
height: 500px;
width: 500px;
border: 1px solid;
position: relative;
display: flex;
margin: 0px;
padding: 0px;
}
#picd1>div{
height: 500px;
width: 500px;
}
#d2{
display: flex;
position: relative;
width: 2000px;
height: 500px;
border: 1px solid black;
background-color: pink;
}
#window1{
margin: 0 auto;
width: 500px;
height: 500px;
border: 0px solid;
position: relative;
overflow: hidden;
}
#biaoq{
display: flex;
}
#biaoq>div{
height: 50px;
width: 50px;
border: 1px red solid;
}
</style>
</head>
<body>
<div id="d2">
<div id="window1">
<div id="picd1">
<div >
1<img src="../lunbotu/img/1.jpg" height="490" width="500" />
</div>
<div>
2<img src="../lunbotu/img/2.jpg" height="490" width="500"/>
</div>
<div>
3<img src="../lunbotu/img/3.jpg" height="490" width="500"/>
</div>
<div>
4<img src="../lunbotu/img/4.jpg" height="490" width="500"/>
</div>
<div>
5<img src="../lunbotu/img/5.jpg" height="490" width="500"/>
</div>
<div>
6<img src="../lunbotu/img/1.jpg" height="490" width="500" />
</div>
</div>
</div>
</div>
<div id="biaoq">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<button id="but1">下一个</button>
<button id="but2">上一个</button>
<script type="text/javascript" src="jquery-3.6.0.min.js">
</script>
<script type="text/javascript">
var count=1;
var uip=2000;
var lume=function arr(){
$("#picd1").animate({"left": -500*count+"px"},uip);
changecol();
if(count==5){
count=0;
$("#picd1").animate({"left": 0*count+"px"},0);
}
count++;
}
var op1=function(){
uip=10;
lume();
uip=1000;
sl = setInterval(lume,3000);
}
var sl = setInterval(lume,3000);
$("#but1").click(function(){
clearInterval(sl);
changecol();
op1();
});
$("#but2").click(function(){
clearInterval(sl);
if(count<2){
count=4
}else if(count==2){
count=0;
}else{
count=count-2;
}
changecol();
op1();
});
$("#biaoq>div").click(function(){
clearInterval(sl);
count=$(this).index();
changecol();
op1();
})
function changecol(){
$("#biaoq>div").css("background-color","white");
$("#biaoq>div").eq(count).css("background-color","red");
}
// function trd(){
// $("#d1>div").eq(1).animate({
// "left":"1000px"
//
// },1000);
//
// $("#d1>div").eq(2).animate({
// "left":"1000px"
//
// },1000);
//
// $("#d1>div").eq(3).animate({
// "left":"1000px"
//
// },1000);
//
// $("#d1>div").eq(4).animate({
// "left":"1000px"
//
// },1000);
//
//
// $("#d1>div").each(function(i,domEle){
// setInterval(function(){
//
//
// $(domEle).animate({
// "left":"0px"
// })
// },10
// );
//
// $("#d1>div:eq("+ i +")").show();
// $("#d1>div:eq(0)").show();
//
//
// $("#d1>div:eq("+ (i+1) +")").animate({
// "left":"1000px"
// },2000+3000*i)
// });
// }
//
// setInterval(function(){
// trd();
// },1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
height: 500px;
width: 500px;
border: 1px red solid;
position: relative;
display: flex;
overflow: hidden;
margin: 0px;
padding: 0px;
}
div>div{
height: 500px;
width: 500px;
border: 1px red ;
position: absolute;
}
</style>
</head>
<body>
<div id="d1">
<div >
<img src="../Jquerydemo1/img/1.jpg" />
</div>
<div>
<img src="../Jquerydemo1/img/2.jpg"/>
</div>
<div>
<img src="../Jquerydemo1/img/3.jpg"/>
</div>
<div>
<img src="../Jquerydemo1/img/4.jpg"/>
</div>
<div>
<img src="../Jquerydemo1/img/5.jpg"/>
</div>
</div>
<script type="text/javascript" src="jquery-3.6.0.min.js">
</script>
<script type="text/javascript">
function trd(){
$("#d1>div").eq(1).animate({
"left":"1000px"
},1000);
$("#d1>div").eq(2).animate({
"left":"1000px"
},1000);
$("#d1>div").eq(3).animate({
"left":"1000px"
},1000);
$("#d1>div").eq(4).animate({
"left":"1000px"
},1000);
$("#d1>div").each(function(i,domEle){
setInterval(function(){
$(domEle).animate({
"left":"0px"
})
},10
);
$("#d1>div:eq("+ i +")").show();
$("#d1>div:eq(0)").show();
$("#d1>div:eq("+ (i+1) +")").animate({
"left":"1000px"
},2000+3000*i)
});
}
setInterval(function(){
trd();
},100);
// $("#d1>div").eq(1).animate({
// "left":"1000px"
//
// },1000).hide();
//
// $("#d1>div").eq(2).animate({
// "left":"1000px"
//
// },1000).hide();
//
// $("#d1>div").eq(3).animate({
// "left":"1000px"
//
// },1000).hide();
//
// $("#d1>div").eq(4).animate({
// "left":"1000px"
//
// },1000);
//
//
//
// $("#d1>div").each(function(i,domEle){
// setInterval(function(){
//
//
// $(domEle).animate({
// "left":"0px"
// })
// },10
// );
//
// $("#d1>div:eq("+ i +")").show();
// $("#d1>div:eq(0)").show();
//
//
// $("#d1>div:eq("+ (i+1) +")").animate({
// "left":"1000px"
// },2000+3000*i)
// });
//
</script>
</body>
</html>