用原生js实现轮播图

最新推荐文章于 2023-03-29 19:41:40 发布

谈情不如逗狗...

最新推荐文章于 2023-03-29 19:41:40 发布

阅读量124

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45892570/article/details/120165456

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

list-style: none;

border: 0;

}

.all {

width: 500px;

height: 300px;

padding: 7px;

border: 1px solid #ccc;

margin: 100px auto;

position: relative;

}

.screen {

width: 500px;

height: 300px;

overflow: hidden;

position: relative;

}

.screen li {

width: 500px;

height: 300px;

overflow: hidden;

float: left;

}

.screen ul {

position: absolute;

left: 0px;

top: 0px;

width: 3000px;

}

.all ol {

position: absolute;

right: 10px;

bottom: 10px;

line-height: 20px;

text-align: center;

}

.all ol li {

float: left;

width: 20px;

height: 20px;

background: #fff;

border: 1px solid #ccc;

margin-left: 10px;

cursor: pointer;

}

.all ol li.current {

background: yellow;

}

#arr {

display: none;

z-index: 1000;

}

#arr span {

width: 40px;

height: 40px;

position: absolute;

left: 5px;

top: 50%;

margin-top: -20px;

background: #000;

cursor: pointer;

line-height: 40px;

text-align: center;

font-weight: bold;

font-family: '黑体';

font-size: 30px;

color: #fff;

opacity: 0.3;

border: 1px solid #fff;

}

#arr #right {

right: 5px;

left: auto;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<ol>

</ol>

</div>

</div>

</body>

// 1. 获取元素

var box = document.querySelector("#box");

var screen = document.querySelector('#screen')

var arr = document.querySelector("#arr");

var ulObj = document.querySelector("#screen ul");

var olObj = document.querySelector('ol');

var left = document.querySelector("#left");

var right = document.querySelector("#right")

var ulLis = ulObj.children;

var olLis = olObj.children;

var imgW = screen.offsetWidth;

var flag = true;

var index = 0;

var circle = 0;

var t = '';

//2. 鼠标经过box 就显示隐藏左右按钮

box.onmouseover = function () {

arr.style.display = 'block';

clearInterval(t);

t = null;// 清除定时器变量

}

box.onmouseout = function () {

arr.style.display = 'none';

t = setInterval(function () {

right.onclick();//手动调用点击事件

}, 3000)

}

// 3. 动态生成小圆圈有几张图片，我就生成几个小圆圈

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

// 创建一个小li

var li = document.createElement('li');

// 记录当前小圆圈的索引号通过自定义属性来做

li.setAttribute('index', i);

// 4. 小圆圈的排他思想我们可以直接在生成小圆圈的同时直接绑定点击事件

li.onclick = function () {

// 当我们点击了某个小li 就拿到当前小li 的索引号

index = this.getAttribute('index');

circle = index;

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

olLis[i].className = '';

}

this.className = 'current';

animation(ulObj, -imgW * index)

}

li.innerHTML = i + 1;

// 把小li插入到ol 里面

olObj.appendChild(li);

}

// 把ol里面的第一个小li设置类名为 current

olLis[0].className = 'current';

// 6. 克隆第一张图片(li)放到ul 最后面

var last = ulLis[0].cloneNode(true);

ulObj.appendChild(last);

left.onclick = function () {

if (flag) {

flag = false;

if (index == 0) {

index = ulLis.length - 1;

ulObj.style.left = -imgW * index + 'px';

}

index--;

animation(ulObj, -imgW * index, function () {

flag = true;

})

circle--;

circle = circle < 0 ? olLis.length - 1 : circle;

circleChange();

}

right.onclick = function () {

if (flag) {

flag = false;

if (index == olLis.length) {

ulObj.style.left = 0;

index = 0;

}

index++;

animation(ulObj, -imgW * index, function () {

flag = true;

})

circle++;

circle = circle == olLis.length ? 0 : circle;

circleChange();

}

function circleChange() {

// 先清除其余小圆圈的current类名

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

olLis[i].className = '';

}

// 留下当前的小圆圈的current类名

olLis[circle].className = 'current';

}

t = setInterval(function () {

right.onclick();

}, 2000)

</script>

</html>

谈情不如逗狗...

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生js实现轮播图

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docum...
复制链接

扫一扫