用JavaScript语言制作简易版轮播图

//代码示例如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div#slider {

width: 1000px;

height: 358px;

background: url('./images/shutter_1.jpg') no-repeat;

display: flex;

justify-content: space-between;

align-items: center;

}

#arrowLeft,

#arrowRight {

width: 49px;

height: 49px;

background: url("images/shutter_prevBtn.png") no-repeat;

margin: 0 20px;

cursor: pointer;

}

#arrowLeft:hover,

#arrowRight:hover {

background-position: center bottom;

}

#arrowRight {

transform: rotate(180deg);

}

#circle {

list-style: none;

overflow: hidden;

align-self: flex-end;

}

#circle li {

float: left;

width: 10px;

height: 10px;

border-radius: 50%;

background-color: white;

margin: 10px 5px;

cursor: pointer;

}

#circle li:first-child {

background-color: gray;

}

</style>

</head>

<body>

</ul>

</div>

let slider = document.querySelector('#slider');

let arrowLeft = document.getElementById('arrowLeft');

let arrowRight = document.getElementById('arrowRight');

let lis = document.querySelectorAll('#circle li');

let imagesArr = ['shutter_1.jpg', 'shutter_2.jpg', 'shutter_3.jpg', 'shutter_4.jpg']

let i = 0;

let timer = setInterval(rightChange, 1000);

// 鼠标移入时暂停计时器

slider.onmouseenter = function () {

clearInterval(timer);

}

// 鼠标移出时重启计时器

slider.onmouseleave = function () {

timer = setInterval(rightChange, 1000)

}

// 点击后向右切换图片

arrowRight.onclick = function () {

rightChange();

}

// 点击后向左切换图片

arrowLeft.onclick = function () {

leftChange();

}

// 四个 li 的点击事件

for (let j = 0; j < lis.length; j++) {

lis[j].onclick = function () {

i = j;

slider.style.background = `url('./images/${imagesArr[i]}') no-repeat`;

circleChange();

}

function rightChange() {

i++;

if (i == imagesArr.length) {

i = 0;

}

slider.style.background = `url('./images/${imagesArr[i]}') no-repeat`;

circleChange();

}

function leftChange() {

i--;

if (i == -1) {

i = imagesArr.length - 1;

}

slider.style.background = `url('./images/${imagesArr[i]}') no-repeat`;

circleChange();

}

function circleChange() {

// 四个 li 全变白

for (let k = 0; k < lis.length; k++) {

lis[k].style.backgroundColor = 'white';

}

// 当前 li 变灰

lis[i].style.backgroundColor = 'gray';

}

</script>

</body>

</html>

转载于:https://www.cnblogs.com/date150219-/p/9170509.html

用JavaScript语言制作简易版轮播图相关推荐

javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局简易版轮播图 < > 页面样式 .container{width: 60 ...
HTML 简易、易懂版轮播图有图有真相 JavaScript实现
HTML 简易.易懂版轮播图 JavaScript实现
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
解决在使用CSS3制作不间断轮播图中收尾连接后Interval 延时问题
2019独角兽企业重金招聘Python工程师标准>>> 问题:使用CSS3制作不间断轮播图中原理就是克隆一个首个轮播图在整个轮播图的尾部,尾部播放放以后继续播放克隆的首部块,然后在 ...
html加css做成的简易木马轮播图
html加css做成的简易木马轮播图自己做着当练习的,还没有加js切页效果代码如下: <!DOCTYPE html> <html lang="en"> ...
短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...
横向自动轮播图html代码,JavaScript实现PC端横向轮播图
JavaScript实现PC端横向轮播图发布时间:2020-09-09 02:10:03 来源:脚本之家阅读:100 作者:菜鸟向往蓝天本文实例为大家分享了JavaScript实现PC端横向轮播 ...
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现
Github - program-learning-lists 最近在刷网易云音乐歌单时发现首页的轮播图很有意思,正好自己想尝试做一个PC版的网易云音乐,于是就是使用Vue去做这个demo,废话少说, ...

用JavaScript语言制作简易版轮播图

用JavaScript语言制作简易版轮播图相关推荐

最新文章

热门文章