vue.js实现切换式轮播图
HTML部分
<body> <div id="app"> <div id="banner"> <div id="imglist"> <a href="" v-for="(item,index) in Rot_a" :key="index"><img :src="item" alt=""></a> </div> <ul id="iconlist"> <li v-for="(item,index) in Rot_a" :key="index"></li> </ul> <div class="ss"> <span @click="ss_a(1)">左</span> <span @click="ss_a(2)">右</span> </div> </div> </div> </body>
CSS部分
<style> * { padding: 0px; margin: 0px; list-style: none; text-decoration: none; } #banner { position: relative; width: 1280px; height: 600px; overflow: hidden; border: 2px solid red; } #imglist { width: 1280px; height: 600px; } #imglist>a { width: 1280px; height: 600px; display: none; } #imglist>a:nth-child(1) { display: block; } #imglist>a img { display: block; width: 100%; height: 100%; } #iconlist { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; bottom: 0px; left: 0px; } #iconlist li { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background-color: #fff; border-radius: 50%; margin: 0px 20px; cursor: pointer; } #iconlist li:nth-child(1) { background-color: red; } .ss { position: absolute; top: 50%; margin-top: -25px; width: 100%; display: flex; flex-flow: row; justify-content: space-between; } .ss span { width: 50px; height: 50px; background-color: pink; } </style>
JS部分
<script> new Vue({ el: ‘#app‘, data: function() { return { Rot_a: [ ‘image/01.jpg‘, ‘image/02.jpg‘, ‘image/03.jpg‘, ‘image/04.jpg‘, ], num: 0, }; }, mounted() { this.aa() }, methods: { aa() { var div = document.getElementById("banner") var icons = document.getElementById("iconlist").getElementsByTagName("li") that = this // 设置循环变量 // 设置定时器 var timer = setInterval(run, 1500) // 循环函数 function run() { that.num = that.num + 1 if (that.num >= that.Rot_a.length) { that.num = 0 } console.log(that.num); that.controlimg(that.num) that.controlicon(that.num) } // 鼠标悬停事件 div.onmouseover = function() { // 停止定时器 clearInterval(timer); } // 鼠标移走事件 div.onmouseout = function() { timer = setInterval(run, 1500) } // 给图标绑定事件 for (var i = 0; i < icons.length; i++) { (function(i) { icons[i].onmouseover = function() { that.controlimg(i) that.controlicon(i) // 循环改变变量 that.num = i } })(i) } }, ss_a(id) { that = this let ids = id that = this if (ids == 1) { that.num = that.num - 1 if (that.num <= -1) { that.num = that.Rot_a.length - 1 } } else { that.num = that.num + 1 if (that.num >= that.Rot_a.length) { that.num = 0 } } that.controlimg(that.num) that.controlicon(that.num) }, // 定义一个函数 控制图片 controlimg(n) { var imgs = document.getElementById("imglist").getElementsByTagName("a") for (var i = 0; i < imgs.length; i++) { imgs[i].style.display = "none" } // 显示指定图片 imgs[n].style.display = "block" }, controlicon(n) { var icons = document.getElementById("iconlist").getElementsByTagName("li") for (var i = 0; i < icons.length; i++) { icons[i].style.backgroundColor = "#fff" } // 当前的图标变红 icons[n].style.backgroundColor = "red" } } }) </script>
全部代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/vue.js"></script> <style> * { padding: 0px; margin: 0px; list-style: none; text-decoration: none; } #banner { position: relative; width: 1280px; height: 600px; overflow: hidden; border: 2px solid red; } #imglist { width: 1280px; height: 600px; } #imglist>a { width: 1280px; height: 600px; display: none; } #imglist>a:nth-child(1) { display: block; } #imglist>a img { display: block; width: 100%; height: 100%; } #iconlist { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; bottom: 0px; left: 0px; } #iconlist li { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background-color: #fff; border-radius: 50%; margin: 0px 20px; cursor: pointer; } #iconlist li:nth-child(1) { background-color: red; } .ss { position: absolute; top: 50%; margin-top: -25px; width: 100%; display: flex; flex-flow: row; justify-content: space-between; } .ss span { width: 50px; height: 50px; background-color: pink; } </style> </head> <body> <div id="app"> <div id="banner"> <div id="imglist"> <a href="" v-for="(item,index) in Rot_a" :key="index"><img :src="item" alt=""></a> </div> <ul id="iconlist"> <li v-for="(item,index) in Rot_a" :key="index"></li> </ul> <div class="ss"> <span @click="ss_a(1)">左</span> <span @click="ss_a(2)">右</span> </div> </div> </div> </body> <script> new Vue({ el: ‘#app‘, data: function() { return { Rot_a: [ ‘image/01.jpg‘, ‘image/02.jpg‘, ‘image/03.jpg‘, ‘image/04.jpg‘, ], num: 0, }; }, mounted() { this.aa() }, methods: { aa() { var div = document.getElementById("banner") var icons = document.getElementById("iconlist").getElementsByTagName("li") that = this // 设置循环变量 // 设置定时器 var timer = setInterval(run, 1500) // 循环函数 function run() { that.num = that.num + 1 if (that.num >= that.Rot_a.length) { that.num = 0 } console.log(that.num); that.controlimg(that.num) that.controlicon(that.num) } // 鼠标悬停事件 div.onmouseover = function() { // 停止定时器 clearInterval(timer); } // 鼠标移走事件 div.onmouseout = function() { timer = setInterval(run, 1500) } // 给图标绑定事件 for (var i = 0; i < icons.length; i++) { (function(i) { icons[i].onmouseover = function() { that.controlimg(i) that.controlicon(i) // 循环改变变量 that.num = i } })(i) } }, ss_a(id) { that = this let ids = id that = this if (ids == 1) { that.num = that.num - 1 if (that.num <= -1) { that.num = that.Rot_a.length - 1 } } else { that.num = that.num + 1 if (that.num >= that.Rot_a.length) { that.num = 0 } } that.controlimg(that.num) that.controlicon(that.num) }, // 定义一个函数 控制图片 controlimg(n) { var imgs = document.getElementById("imglist").getElementsByTagName("a") for (var i = 0; i < imgs.length; i++) { imgs[i].style.display = "none" } // 显示指定图片 imgs[n].style.display = "block" }, controlicon(n) { var icons = document.getElementById("iconlist").getElementsByTagName("li") for (var i = 0; i < icons.length; i++) { icons[i].style.backgroundColor = "#fff" } // 当前的图标变红 icons[n].style.backgroundColor = "red" } } }) </script> </html>
<style>
* {
padding: 0px;
margin: 0px;
list-style: none;
text-decoration: none;
}
#banner {
position: relative;
width: 1280px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
#imglist {
width: 1280px;
height: 600px;
}
#imglist>a {
width: 1280px;
height: 600px;
display: none;
}
#imglist>a:nth-child(1) {
display: block;
}
#imglist>a img {
display: block;
width: 100%;
height: 100%;
}
#iconlist {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
bottom: 0px;
left: 0px;
}
#iconlist li {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
margin: 0px 20px;
cursor: pointer;
}
#iconlist li:nth-child(1) {
background-color: red;
}
.ss {
position: absolute;
top: 50%;
margin-top: -25px;
width: 100%;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.ss span {
width: 50px;
height: 50px;
background-color: pink;
}
</style>