HTML5 实现自动轮播

功能概要：

1. 自动播放轮播图
2. 点击左右移动轮播图
3. 鼠标移入到标签上显示对应图片
4. 移入停止轮播，左右按钮显示
5. 移出左右按钮隐藏

效果图：

H5实现轮播图

原生 js 实现轮播图

• html 代码：

	

		
		

			

			

			

			

			

		
		

		
	
	
<>

• css 代码：

• js 代码：

使用 swiper 插件实现自动轮播

1. 安装 swiper 包

先在命令行 cd 到项目中

cd 项目名

需要在后面加版本号

npm i swiper@3

在 package.json 中查看是否安装成功

2. 在页面中引入 swiper 代码

在 HTML 中引入代码

// 引入 css 样式

// 引入 js 样式

在 vue 中引入代码

import Swiper from "swiper";
import "swiper/css/swiper.min.css";

3. swiper 代码的使用

html 代码：

  

    

      
    
    

      
    
  
  
  

  //前进后退
  

  

  //滚动条
  

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 中引入方法

具体代码在 element-ui 官网进行查阅：https://element.eleme.cn/#/zh-CN/component/carousel

---

以上就是 HTML 中实现自动轮播代码思路，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog