js实现轮播图自动切换
本文实例为大家分享了js实现轮播图自动切换的具体代码，供大家参考，具体内容如下
先看效果图
第一种
//点击按钮，序号变化
showIdx++;
if (showIdx == imgArr.length) {
showIdx = 0;
}
//所有盒子左移动
for (let i = 0; i <items.length; i++) {
items[i].style.left = parseFloat(items[i].style.left) - loopbox.offsetWidth + "px";
}
//冗余容器从页面中删除
//当冗余容器从页面中移除后，为了保证结构想对应，所以呀item中数组也要把这个容器删除
let deleteBox = items.shift();
// console.log(items);
deleteBox.remove();
//在用户看不到的内存中，变更【被从这个页面删除的元素的位置
deleteBox.style.left = "900px";
wrapper.appendChild(deleteBox);
items.push(deleteBox);
//把容器从小添加至压面后，容器加载的图片在当前的下一站
// 第七步 把容器重新添加至页面后，容器加载的图片要是当前这张的下一张
if (showIdx == imgArr.length - 1) {
deleteBox.innerHTML = `<img src=${imgArr[0]}>`;
} else {
deleteBox.innerHTML = `<img src=${imgArr[showIdx + 1]}>`;
}
第二种，图片切换，css代码
html,
body,
ul,
li {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.loopbox {
width: 1226px;
height: 460px;
background: #030;
position: relative;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
float: left;
transition: all .3s;
position: absolute;
left: 0;
/* overflow: hidden; */
}
.box.notran{
transition: none;
}
.box-item {
/* width: 100%; */
width: 1226px;
height: 100%;
float: left;
background: #f1f1f1;
text-align: center;
font-size: 24px;
line-height: 100px;
/* display: none; */
/* transition: all .3s; */
}
.box-item img {
width: 100%;
height: 100%;
/* 图片适应 */
object-fit: cover;
}
.arrow {
width: 60px;
line-height: 30px;
background: #f00;
text-align: center;
color: #f1f1f1;
position: absolute;
top: 50%;
left: 10px;
margin-top: -15px;
border-radius: 15px;
}
.arrow:hover {
background: #f60;
}
.arrow.arrow-right {
left: auto;
right: 10px;
}
.page {
position: absolute;
width: 100%;
text-align: center;
bottom: 10px;
}
.page li {
display: inline-block;
width: 80px;
height: 8px;
border-radius: 4px;
background: #000;
}
/* .page li:first-child {
background: #f90;
} */
.page li:hover {
background: #f60;
}
.page li.current {
background: #f90;
}
.side-qq {
width: 100px;
height: 100px;
background: #f00;
/* position: fixed; */
position: absolute;
right: 10px;
top: 450px;
}
.navbar {
width: 100%;
background: #ccc;
text-align: center;
}
.navbar.fixed {
position: fixed;
left: 0;
top: 0;
}
.nav {
height: 21px;
}
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 1.分析页面结构 -->
<div class="loopbox">
<div id="box" class="box">
<div class="box-item curr"><img src="images/1.webp"></div>
<div class="box-item"><img src="images/2.webp"></div>
<div class="box-item"><img src="images/3.webp"></div>
<div class="box-item"><img src="images/4.webp"></div>
</div>
<a class="arrow arrow-left" href="javascript:;">左</a>
<a class="arrow arrow-right" href="javascript:;">右</a>
<ul id="page" class="page">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1.5.初始化页面，保证所有的图片先拍成一排
let items = document.querySelectorAll(".box-item");
let lis = document.querySelectorAll(".page li");
let leftBtn=document.querySelector(".arrow-left")
let box = document.querySelector(".box");
let loopbox = document.querySelector(".loopbox");
box.style.width = items.length * loopbox.offsetWidth + "px";
box.style.left = 0+"px";
// 2.分析功能入口
let rightBtn = document.querySelector(".arrow-right");
let showIdx = 0;
rightBtn.onclick = function (){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx ++;
if(showIdx == 4){
showIdx = 0;
}
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
for(let i=0;i<lis.length;i++){
lis[i].onclick =function(){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx=i;
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
}
}
leftBtn.onclick = function(){
//第一张 消失（取消类名）
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx --;
//预知判断
if(showIdx == -1){
//点击之后,点击之前意味着已经在加，需要归零
showIdx = 3;
}
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
// 第二张 出现（添加类名）showIdx+1
};
for(let j=0;j<lis.length;j++){
lis[j].onclick = function(){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
//选好变为点击序号对应结构
showIdx=j;
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
}
}
}
function time(){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx ++;
if(showIdx == 4){
showIdx = 0;
}
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
box.style.left = (-1) * showIdx * loopbox.offsetWidth + "px";
}
for(let i=0;i<lis.length;i++){
lis[i].onclick =function(){
items[showIdx].classList.remove("curr");
lis[showIdx].classList.remove("current");
showIdx=i;
items[showIdx].classList.add("curr");
lis[showIdx].classList.add("current");
}
}
setInterval(time,3000)
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现图片轮播切换效果
最近在b站上学习的时候,学到了一个用原生js实现图片轮播切换效果的实战,码下来收藏 上图是这个小实战的效果图,整个小实战所实现的功能是图片自动轮播切换.点击上下键图片切换上下图片.点击右下角圆点切换相应图片.点击主菜单显示相应子菜单内容. html页面布局 <body> <!--主区域,存放所有需要元素--> <div id="main" class="main"> <!-- 导航菜单 --> <div clas
-
js图片轮播手动切换效果
利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot
-
JS实现多重选项卡切换轮播图
轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图. 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入.手机上手指滑动后,可以分别展示不同的图片,这个模块就叫做轮播模块. (做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~) html布局部分: <div id="box"> <div class="scenery pic"
-
原生javascript实现图片轮播切换效果
本文实例为大家分享了javascript实现图片轮播切换效果的具体代码,供大家参考,具体内容如下 效果如下: 代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&
-
javascript实现图片自动和可控的轮播切换特效
演示图: 需要引入的文件 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1
-
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it
-
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
原生js实现图片层叠轮播切换效果
本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下 效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi
-
js实现点击切换和自动播放的轮播图
本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下 轮播图案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&