Jquery实现轮播图

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#outerdiv{

width: 1200px;

height: 300px;

border: 1px solid red;

margin: 0px auto;

position: relative;

}

#windows{

width: 150px;

height: 150px;

border: 2px solid black;

margin: 0px auto;

position: relative;

overflow: hidden;

}

#pic{

width: 750px;

height: 100px;

display: flex;

position: absolute;

}

#pic>div{

width: 150px;

height: 100px;

}

#a2{

display: flex;

}

#a2>div{

width:20px ;

height:20px ;

border: 1px solid black;

}

#a2>div:first-child{

background-color: red;

}

</style>

</head>

<body>

<div id="outerdiv">

<div id="windows">

<div id="pic">

<div style="background-color: yellow;">11</div>

<div style="background-color: red;">22</div>

<div style="background-color:blueviolet;">33</div>

<div style="background-color: pink;">44</div>

<div style="background-color: yellow;">新的11</div>

</div>

</div>

</div>

<div id="a2">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

</div>

<button id="prepage">上一页</button><button id="nextpage">下一页</button>

</body>

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

<script type="text/javascript" >

//轮播图的思路，1）先设置大的div，且在css中设置对应盒子的宽度高度，使其在浏览器中居中，设置相对定位

// 2）设置一个盒子作为展示的盒子，其内部包括另外的一个4倍长度盒子(里面包含和浏览器同宽的四个小盒子)，设置弹性盒子使其水平

//因为窗口盒子包含大盒子，所以长条大盒子的第一个盒子是在窗口里的，使用overflow:hidden隐藏超出的盒子部分

//(absolute脱离了文档流,原来位置不再保留,可被代替)

//3)使用animate方法使其往左移动,第一张图本身就在窗口里，往后每张图片移动下标*宽度,因为你每次下标是同样的话，就是原地不动，

//每次动的还是盒子原来位置

//4)每次翻过最后一个盒子，需要给他添一个第一张盒子，设置滚动

/*var fun=function gundong () {

$("#pic").animate({"left":-150*1+"px"},2000);

$("#pic").animate({"left":-150*2+"px"},2000);

$("#pic").animate({"left":-150*3+"px"},2000);

$("#pic").animate({"left":-150*4+"px"},2000);

}

setInterval(fun(),2000);

$("#pic").animate({"left":0+"px"},0);

setInterval(fun(),2000);*/

//5)下标与时间单独拎出,设置定时函数，在规定时间内实现函数，最后一张图比较特殊，需要快速回到第一张

var sec=2000;

var count=0;

var fun=function gundong () {

if (count<4) {

++count;

$("#pic").animate({"left":-150*count+"px"},sec);

} else{

count=0;

$("#pic").animate({"left":count+"px"},0);

}

col();

}

var ter=setInterval(fun,2000);

//6)给下一页绑定单击事件,点击时，先清楚定时函数，定时函数里一般放定时函数的对象

//然后设置一个短的时间，调动函数,再设置一个长时间，再次定时滚动

$("#nextpage").click(function () {

clearInterval(ter);

col();

sec=20;

fun();

sec=1000;

ter=setInterval(fun,3000);

})

//7)给上一页绑定单击事件,分为正常情况下，特殊情况下,是第一张和第2张，最后一张，函数中已经加1了

$("#prepage").click(function () {

clearInterval(ter);

if (count<1) {

count=2;

} else if (count==1) {

count=-1;

}else{

count=count-2;

}

col();

sec=20;

fun();

sec=1000;

ter=setInterval(fun,3000);

})

//8)绑定数字键

$("#a2>div").click(function () {

clearInterval(ter);

count=$(this).index()-1; //获取当前元素索引

col();

sec=20;

fun();

sec=1000;

ter=setInterval(fun,3000);

})

//9)变色

function col() {

$("#a2>div").css("background-color","white");

$("#a2>div").eq(count).css("background-color","red");

}

</script>

</html>