下文所述一切都是个人见解,仅当参考;如有错误,请指教,十分感谢。
1.下载swiper软件
（1）npm方法
npm install swiper
（2）官网下载
swiper插件
2.图片轮播（效果图+代码）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="../swiper-5.0.4/swiper-5.0.4/package/css/swiper.min.css"> //引入swiper的css
<style>
.mySwiper1{
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
width:480px;
height:270px;
margin:20px auto;
border:1px solid red;
}
.swiper-slide a img{
display: block;
width: 100%;
}
.wiper-pagination{
--swiper-theme-color: #ff6600;
--swiper-pagination-color: #00ff00;/* 两种都可以 */
}
.swiper-container .hide{
opacity:0;
}
.swiper-button-next,.swiper-button-prev{
transition:opacity 0.5s;
}
.swiper-button-disabled{
display:none;
}
</style>
</head>
<body>
<div class="swiper-container banner mySwiper1">
<div class="swiper-wrapper">
<div class="swiper-slide "><a href="#"><img src="https://imgchr.com/i/M6MoQg" alt=""></a></div>
<div class="swiper-slide "><a href="#"><img src="https://imgchr.com/i/M6MhJf" alt=""></a></div>
<div class="swiper-slide "><a href="#"><img src="./img/demo_6.jpg" alt=""></a></div>
<div class="swiper-slide "><a href="#"><img src="./img/demo_4.jpg" alt=""></a></div>
</div>
<div class="btn">
<div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
<div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
</div>
<div id="a"></div>
<div class="b"></div>
<script language="javascript" src="./src/js/jquery-3.4.1.min.js"></script>
<script language="javascript" src="../swiper-5.0.4/swiper-5.0.4/package/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.mySwiper1', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true, ////点击分页器的指示点分页器会控制Swiper切换
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//设置
on: {
slideChangeTransitionEnd: function(){
if(this.isEnd){
this.navigation.$nextEl.css('display','none');
}else{
this.navigation.$nextEl.css('display','block');
}
},
},
//可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转
effect : '', //轮播类型
});
//鼠标移出隐藏按钮，移入显示按钮
swiper.el.onmouseover=function(){
swiper.navigation.$nextEl.removeClass('hide');
swiper.navigation.$prevEl.removeClass('hide');
}
swiper.el.onmouseout=function(){
swiper.navigation.$nextEl.addClass('hide');
swiper.navigation.$prevEl.addClass('hide');
}
</script>
</body>
</html>
原创文章 6
获赞 7
访问量 1348