轮播图的分页与点击

最新推荐文章于 2023-03-30 16:42:14 发布

wanan1215

最新推荐文章于 2023-03-30 16:42:14 发布

阅读量380

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/wanan1215/article/details/123813271

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.banner{

position: relative;

width: 800px;

/* height: ; */

border: 1px solid red;

margin: 50px auto;

overflow: hidden;

}

img{

vertical-align: top;

}

.wrap{

border: 1px solid green;

/* overflow: hidden;

zoom: 1; */

width: 4800px;

}

.wrap>div{

float: left;

width: 800px;

}

.prev,.next{

position: absolute;

transform: translateY(-50%);

top:50%;

width: 50px;

height: 100px;

font-size: 3em;

text-align: center;

line-height: 100px;

cursor: pointer;

}

.prev{

left: 0;

}

.next{

right: 0;

}

.pageaition-item{

float: left;

width: 10px;

height: 10px;

border-radius: 50%;

background-color: aquamarine;

margin-left: 20px;

cursor: pointer;

}

.pageaition-item:first-child{

margin-left: 0px;

background-color: black;

}

.pageaition{

position: absolute;

width: 130px;

overflow: hidden;

zoom: 1;

left: 50%;

transform: translateX(-50%);

bottom: 30px;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<!-- <div>

</div> -->

</div>

</div>

</body>

var initOffet =0;

var offset = 800;

var t1 ="";

var t2 =""

var wrap = document.getElementsByClassName("wrap")[0];

// 分页器：

var nums = wrap.children.length;

var itemIndex = 0; // 保存分页器的下标

// 动态生成 f分页器圆点

for(var i =0;i<nums;i++){

var item = document.createElement("div");

item.className ="pageaition-item";

document.getElementsByClassName("pageaition")[0].appendChild(item)

}

// 获取分页器集合

var itemList = document.getElementsByClassName("pageaition-item");

function moving(exp="next"){

if(exp =="next"){

//itemIndex++; //1

// 分页器下一个：

for(var j=0;j<itemList.length;j++){

itemList[j].style.backgroundColor="aquamarine"

}

itemIndex = itemIndex>=itemList.length-1 ? 0 :++itemIndex;

// if(itemIndex>=itemList.length-1){

// console.log(itemIndex)

// itemIndex =0

// }else{

// itemIndex++;

// }

if(initOffet <=-3200){

wrap.style.transition = ""

initOffet =0

// itemIndex=0

wrap.style.marginLeft =initOffet+"px"

itemList[itemIndex].style.backgroundColor="black"

}else{

initOffet -= offset;

wrap.style.transition = "all 0.5s"

wrap.style.marginLeft =initOffet+"px"

itemList[itemIndex].style.backgroundColor="black"

}

}else{

for(var j=0;j<itemList.length;j++){

itemList[j].style.backgroundColor="aquamarine"

}

itemIndex = itemIndex<=0? itemList.length-1 :--itemIndex;

if(initOffet >=0){

wrap.style.transition = ""

initOffet =-3200;

wrap.style.marginLeft =initOffet+"px"

itemList[itemIndex].style.backgroundColor="black"

}else{

initOffet += offset;

wrap.style.transition = "all 0.5s"

wrap.style.marginLeft =initOffet+"px"

itemList[itemIndex].style.backgroundColor="black"

}

// 初始轮播

t1 = setInterval( moving,3000)

document.getElementsByClassName("banner")[0].οnmοuseοver= function(){

clearInterval(t1)

clearInterval(t2)

}

document.getElementsByClassName("banner")[0].οnmοuseοut= function(){

t2 = setInterval( moving,3000)

}

// 下一页

document.getElementsByClassName("next")[0].onclick = function(){

moving("next")

}

document.getElementsByClassName("prev")[0].onclick = function(){

moving("prev")

}

// 分页器的两个场景：

// 1、选中的状态，跟初始轮播有关系

// 2、点击分页器圆点切换图片

for(let index =0;index<itemList.length;index++){

itemList[index].onclick = function(){

for(var j=0;j<itemList.length;j++){

itemList[j].style.backgroundColor="aquamarine"

}

itemIndex = index

// 点击对应分页器切换对应得图片

//alert(index)

// offset/800

initOffet = index*offset*-1

wrap.style.marginLeft =initOffet+"px"

itemList[itemIndex].style.backgroundColor="black"

}

</script>

</html>

wanan1215

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图的分页与点击

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>.banner{...
复制链接

扫一扫