如何使用纯CSS、JS实现图片轮播效果
导读：收集整理的这篇文章主要介绍了如何使用纯CSS、JS实现图片轮播效果，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家详细介绍一下使用纯CSS、JS实现图片轮播效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有...
收集整理的这篇文章主要介绍了如何使用纯CSS、JS实现图片轮播效果，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家详细介绍一下使用纯CSS、JS实现图片轮播效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。!DOCTYPE htML>
html>
head>
meta charset="UTF-8">
tITle>
/title>
!--轮播-->
style>
.carousel {
width: 648px;
height: 400px;
margin: 0 auto;
text-align: center;
position: absolute;
left: 24%;
/*border: 1px solid red;
*/ }
.inner {
/*border: 12px solid blue;
*/ width: 648px;
height: 400px;
position: absolute;
}
.inner-img {
width: 200px;
height: 500px;
display: none;
/*position: absolute;
*/ position: relative;
/*top:0;
*/ /*left:0;
*/ /*z-index:1000;
*/ }
.inner-img.active {
display: block;
}
.leftBTn, .rightBtn {
position: absolute;
width: 40px;
height: 60px;
background: rgba(0, 0, 0, 0.3);
/*近乎透明色*/ font-Size: 30px;
color: #fff;
text-align: center;
line-height: 60px;
cursor: pointer;
display: none;
}
.leftBtn {
left: 5px;
top: 170px;
}
.rightBtn {
/*right:5px;
*/ left: 603px;
top: 170px;
}
.carousel ul {
position: absolute;
/*left:20px;
*/ padding-left: 228px;
bottom: 10px;
/*z-index: 999;
*/ list-style: none;
width: 200px;
height: 20px;
}
.carousel ul .page {
float: left;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 18px;
/*变成圆形*/ background: black;
margin-right: 6px;
/*距离6个px单位*/ color: #fff;
font-size: 14px;
/*text-align: center;
*/ cursor: pointer;
}
.carousel ul .page.active {
background-color: red;
}
.carousel p {
/*float: left;
*/ margin-top: -360px;
margin-right: -600%;
color: black;
text-decoration: none;
list-style: none;
}
/style>
/head>
body>
!--轮播-->
p class="carousel">
p class="inner">
a href="#" class="inner-img active">
img src="https://s2.ax1x.COM/2019/11/06/MCxe0O.jpg" alt="图片加载中" width="648" height="400">
/a>
a href="#" class="inner-img">
img src="https://s2.ax1x.com/2019/11/06/MCxl9A.jpg" alt="图片加载中" width="648" height="400">
/a>
a href="#" class="inner-img">
img src="https://s2.ax1x.com/2019/11/06/MCxJnf.jpg" alt="图片加载中" width="648" height="400">
/a>
a href="#" class="inner-img">
img src="https://s2.ax1x.com/2019/11/06/MCxtHS.jpg" alt="图片加载中" width="648" height="400">
/a>
a href="#" class="inner-img">
img src="https://s2.ax1x.com/2019/11/06/MCxaNQ.jpg" alt="图片加载中" width="648" height="400">
/a>
a href="#" class="inner-img">
img src="https://s2.ax1x.com/2019/11/06/MCx6BT.jpg" alt="图片加载中" width="648" height="400">
/a>
a href="#" class="inner-img">
img src="https://s2.ax1x.com/2019/11/06/MCxW4J.jpg" alt="图片加载中" width="648" height="400">
/a>
a href="#" class="inner-img">
img src="https://s2.ax1x.com/2019/11/06/MCx43R.jpg" alt="图片加载中" width="648" height="400">
/a>
p class="leftBtn">
&
lt;
/p>
!--左按钮-->
p class="rightBtn">
&
gt;
/p>
!--右按钮-->
/p>
ul>
li class="page active">
1/li>
li class="page">
2/li>
li class="page">
3/li>
li class="page">
4/li>
li class="page">
5/li>
li class="page">
6/li>
li class="page">
7/li>
li class="page">
8/li>
/ul>
/p>
/body>
script>
VAR carousel = document.getElementsByclassname('carousel')[0], //获取carousel的class类 // 获取所有包含图片的链接 innerImg = document.getElementsByClassName('inner-img'), // 获取左右按钮 btnL = document.getElementsByClassName('leftBtn')[0], btnR = document.getElementsByClassName('rightBtn')[0], // 获取分页器 page = document.getElementsByClassName('page'), num = 0;
// 声明变量 初始图片为第一张0 // 声明时间控制函数 var timer = setInterval(moveR, 2500);
//调用MoveR 时间间隔2.5s // 图片向右轮播 function moveR() {
num++;
// 变量每3000毫秒递增一次,图片向右轮播 // 如果是最后一张图片的时候从0开始显示 if(num == innerImg.length) {
num = 0;
}
move();
}
;
// 图片向左轮播 function moveL() {
num--;
// 每调用一次moveL(),变量递减一次 // 如果是第一张图片，则从最后一张图片开始显示 if(num == -1) {
num = innerImg.length - 1;
}
;
move();
}
// 图片切换 function move() {
// 把所有的innerImg隐藏和page背景全部变成黑色 for(var i = 0;
i innerImg.length;
i++) {
innerImg[i].style.display = 'none';
page[i].style.background = 'black';
}
// 把当前num下标的innerImg显示和page背景变成red innerImg[num].style.display = 'block';
page[num].style.background = 'red';
}
// 分页器鼠标滑过时图片切换 for(var i = 0;
i page.length;
i++) {
// 用来保存下标，page[i].index == 0 / 1 / 2 / 3 /4... page[i].index = i;
// console.LOG(page[i].index);
// 因为已经保存好的下边，这里的page[i], page[0], page[1], page[2], page[3] page[i].onmouseover = function() {
for(var j = 0;
j page.length;
j++) {
page[j].style.background = 'black';
innerImg[j].style.display = 'none';
}
this.style.background = 'red';
// console.log(this.index);
可以查看是多少 innerImg[this.index].style.display = 'block';
num = this.index;
}
}
btnL.onclick = function() {
moveL();
}
btnR.onclick = function() {
moveR();
}
// 鼠标划上carousel时让左右按钮显示 并清除时间函数 carousel.onmouseover = function() {
// 清除时间函数 clearInterval(timer);
//暂停 图片不继续循环 btnR.style.display = 'block';
btnL.style.display = 'block';
}
// 鼠标离开carousel时让左右按钮隐藏 carousel.onmouseout = function() {
// 开启时间函数 timer = setInterval(moveR, 2500);
btnR.style.display = 'none';
btnL.style.display = 'none';
}
/script>
/html>
推荐学习：css视频教程
以上就是如何使用纯CSS、JS实现图片轮播效果的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用纯CSS、JS实现图片轮播效果
本文地址： https://pptw.com/jishu/589164.html