目录
功能概要：
- 自动播放轮播图
- 点击左右移动轮播图
- 鼠标移入到标签上显示对应图片
- 移入停止轮播，左右按钮显示
- 移出左右按钮隐藏
效果图：
H5实现轮播图
原生 js 实现轮播图
- html 代码：
<div class="all" id='box'>
<div class="screen">
<!--相框-->
<ul>
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
- css 代码：
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
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: #DB192A;
}
#arr {
display: none;
}
#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>
- js 代码：
<script>
//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中的所有的li
var list = ulObj.children;
//获取ol
var olObj = screen.children[1];
//焦点的div
var arr = my$("arr");
console.log(imgWidth)
var pic = 0; //全局变量
//创建小按钮----根据ul中的li个数
for (var i = 0; i < list.length; i++) {
//创建li标签,加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每个ol中的li标签上添加一个自定义属性,存储索引值
liObj.setAttribute("index", i);
//注册鼠标进入事件
liObj.onmouseover = function() {
//先干掉所有的ol中的li的背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进来的li的背景颜色
this.className = "current";
//获取鼠标进入的li的当前索引值
pic = this.getAttribute("index");
//移动ul
animate(ulObj, -pic * imgWidth);
};
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
var timeId = setInterval(clickHandle, 1000);
//鼠标进入到box的div显示左右焦点的div
box.onmouseover = function() {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
};
//鼠标离开到box的div隐藏左右焦点的div
box.onmouseout = function() {
arr.style.display = "none";
//鼠标离开自动播放
timeId = setInterval(clickHandle, 1000);
};
//右边按钮
my$("right").onclick = clickHandle;
function clickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0; //先设置pic=0
ulObj.style.left = 0 + "px"; //把ul的位置还原成开始的默认位置
}
pic++; //立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth); //pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
};
//左边按钮
my$("left").onclick = function() {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色---所有的小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function() {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
}
</script>
使用 swiper 插件实现自动轮播
1. 安装 swiper 包
先在命令行 cd 到项目中
cd 项目名
需要在后面加版本号
npm i swiper@3
在 package.json 中查看是否安装成功
2. 在页面中引入 swiper 代码
在 HTML 中引入代码
// 引入 css 样式
<link rel="stylesheet" href="./swiper-5.4.1/package/css/swiper.min.css">
// 引入 js 样式
<script src="./swiper-5.4.1/package/js/swiper.min.js"></script>
在 vue 中引入代码
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
3. swiper 代码的使用
html 代码：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://img.js.design/assets/img/622ff0e327d2c84efaddac81.png"
/>
</div>
<div class="swiper-slide">
<img
src="https://img.js.design/assets/img/622ff0e327d2c84efaddac81.png"
/>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
//前进后退
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
//滚动条
<div class="swiper-scrollbar"></div>
</div>
js 代码：
new Swiper(".swiper-container", {
// 循环模式选项
loop: true,
// 自动播放
autoplay: true,
// 如果需要分页器
pagination: {
// 分页器与哪个标签关联
el: ".swiper-pagination",
// 分页器是否可以点击
clickable: true,
bulletClass: "my-bullt-class",
bulletActiveClass: "my-bullet-active",
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
});
css 代码：
.swiper-container {
margin: 0 0.15rem;
margin-top: 0.12rem;
border-radius: 0.08rem;
box-shadow: 0px 0.03rem 0.06rem rgba(178, 178, 178, 0.63);
.swiper-slide {
height: 1.72rem;
img {
height: 1.72rem;
border-radius: 0.08rem;
}
}
}
除此之外要是想要有更多的轮播图样式可以去swiper官网进行查阅：https://swiper.com.cn/
使用 element-ui 插件实现自动轮播
1. 安装 element-ui 插件
npm i element-ui
2. 在页面中引入 element-ui 插件
vue 中引入方法
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "./assets/css/index.styl";
import "./assets/css/over-write.styl";
Vue.use(ElementUI);
html 中引入方法
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
具体代码在 element-ui 官网进行查阅：https://element.eleme.cn/#/zh-CN/component/carousel
以上就是 HTML 中实现自动轮播代码思路，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog
扫一扫
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
