JavaScript写轮播图效果

最新推荐文章于 2024-07-20 10:36:53 发布

yoec_Jult_4

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量83

点赞数

分类专栏： js 文章标签： javascript 前端开发语言 css html

本文链接：https://blog.csdn.net/yoec_Jult_4/article/details/130382099

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<style>

* {

margin: 0;

padding: 0;

list-style: none;

}

.box {

width: 800px;

height: 500px;

/* border: 5px solid #333; */

margin: 10px auto;

position: relative;

overflow: hidden;

}

.box>.img-box {

width: 4000px;

position: absolute;

left: 0px;

}

.box>.img-box>img {

width: 800px;

height: 500px;

float: left;

}

.box>ul>li {

width: 30px;

height: 10px;

background-color: white;

margin: 5px;

float: left;

}

.box>ul {

position: absolute;

bottom: 10%;

left: 35%;

}

.box>ul>.active {

background-color: red;

}

.box>.cut {

width: 800px;

position: absolute;

top: 40%;

font-size: 80px;

font-weight: 900;

color: white;

}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

var imgBox = document.querySelector('.box>.img-box')

var showWidth = -800

// 1.自动生成导航点,默认第一个为选中状态

autoLi()

function autoLi() {

var img = document.querySelectorAll('.box>.img-box>img')

for (var i = 0; i < img.length; i++) {

//1.1生成元素

var li = document.createElement('li')

// 1.2让元素放到ul下面

document.querySelector('.box>ul').appendChild(li)

}

// 1.3默认第一个为选中状态

document.querySelector('.box>ul>li').className = 'active'

}

// 2.可以点动导航点

// 2.1点谁谁变红

tabFn()

function tabFn() {

var li = document.querySelectorAll('.box>ul>li')

for (var i = 0; i < li.length; i++) {

// 2.2设置自定义属性

li[i].setAttribute('data-index', i)

li[i].onclick = function () {

// 排除其他导航样式

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

li[j].className = ''

}

this.className = 'active'

// 2.3点谁就获取谁的自定义属性

var x = parseInt(this.getAttribute('data-index'))

// 2.4让图片切换得慢一些

// imgBox.style.left=(-800)*x+'px'

move(imgBox, (-800) * x)

}

function move(ele, target) {

clearInterval(ele.int)

// 2.4.1 获取盒子的初始位置

var origin = parseInt(ele.style.left)

//向左移动时 0 -800 得到负数

// 向右移动时 -800 0 得到正数

var mean = (target - origin) / 40

// 2.4.2设置定时任务

ele.int = setInterval(function () {

var y = parseInt(ele.style.left)

if (mean < 0) {

if (y > target) {

ele.style.left = y + mean + 'px'

} else {

ele.style.left = target + 'px'

clearInterval(ele.int)

}

} else {

if (y < target) {

ele.style.left = y + mean + 'px'

} else {

ele.style.left = target + 'px'

clearInterval(ele.int)

}

}, 10)

}

//6自动克隆图片

cloneFn()

function cloneFn(){

// 6.1获取所有图片的节点

var imgAll=document.querySelectorAll('.box>.img-box>img')

// 6.2 克隆第一张和最后一张图片

var img1 =imgAll[0].cloneNode()

var img2=imgAll[imgAll.length-1].cloneNode()

console.log(img1,img2)

// 6.3把克隆的图片放到对应的位置假的第一张=》放到最后的位置

imgBox.appendChild(img1)

// 6.4把假的最后一张放到第一张的前面

imgBox.insertBefore(img2,imgAll[0])

// 6.5把装图片的盒子变大

imgBox.style.width=(imgAll.length+2)*showWidth*-1+'px'

// 真正第一张为默认状态显示

imgBox.style.left=showWidth*1+'px'

}

// 3.左右切换

// 5.在原来的基础上去做调整

// 7.克隆后微调原来图片展示位置

// 8.微调前后调动的样式

function cutFn(a) {

// 3.1获取导航栏的所有元素

var li = document.querySelectorAll('.box>ul>li')

//3.2判断哪个li带有红色样式

for (var i = 0; i < li.length; i++) {

if (li[i].className == 'active') {

var x = parseInt(li[i].getAttribute('data-index'))

// console.log(x)

}

li[x].className = ''

// 4.切换图片

if (a == 1 && x == li.length - 1) {

li[0].className = 'active'

// 7.2像右边加一的时候，把原来的默认第一张图片展示的变成第二张

// 8.1像右边切换到最后一个时，让他展示假一张6*-800

move(imgBox,showWidth*(li.length+1))

} else if (a == -1 && x == 0) {

li[li.length - 1].className = 'active'

// 7.3也在原来的基础上加一

// 8.2像左边切换到第一个导航栏时，让图片到假的最后一张

move(imgBox,showWidth*0)

} else {

// 8.1.1 像右边切换的同时，图片盒子位置刚好也是在最后一张，6*-800

var y=parseInt(imgBox.style.left)

if(a==1&&y==(li.length+1)*showWidth){

imgBox.style.left=showWidth*1+'px'

}else if(a==-1&&y==0){

// 8.2.1 像左边切换，同时已经到第一张假图片的位置，给快速定位

imgBox.style.left=showWidth*(li.length)+'px'

}

// 7.1先调统一切换的

li[x + a].className = 'active'

move(imgBox, showWidth * (x + a+1))

}

// 9.自动播放图片

autoFn()

function autoFn(){

imgBox.int2=setInterval(function(){

cutFn(1)

},2000)

}

// 10 给显示的盒子绑定移入移出事件

evenFn()

function evenFn(){

// 10.1当鼠标移入时

var box=document.querySelector('.box')

box.οnmοuseenter=function(){

// 10.2清除定时任务

clearInterval(imgBox.int2)

}

box.οnmοuseleave=function(){

autoFn()

}

</script>

</body>

</html>

yoec_Jult_4

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript写轮播图效果

/ 7.2像右边加一的时候，把原来的默认第一张图片展示的变成第二张。// 6.3把克隆的图片放到对应的位置假的第一张=》放到最后的位置。// 8.2像左边切换到第一个导航栏时，让图片到假的最后一张。<img src="./图片/图片1.webp.jpg"><img src="./图片/图片2.webp.jpg"><img src="./图片/图片3.webp.jpg"><img src="./图片/图片4.webp.jpg"><img src="./图片/图片5.webp.jpg">
复制链接

扫一扫