js轮播图自动切换和css页面自动渐变
效果如下：
可以去jq官网学习：/
部分代码如下：
*{margin: 0; padding: 0;}
p{text-align: center;}
img{ width: 43.75rem;
height: 18.125rem;
}
.swiper-container{
width: 43.75rem;
height: 18.125rem;
margin:0 auto;
}
.swiper-button-next {
right: 20px;
left: auto;
}
.swiper-button-prev {
left: 20px;
right: auto;
}
/* css定义分页，导航按钮颜色 */
#case5{
--swiper-theme-color: #ff6600;
--swiper-pagination-color: #00ff33;/* 两种都可以 */
}
#case6 img,#case7 img{transform: scale(0.7);}
#case7{
width:auto;
}
var mySwiper = new Swiper('#case1', {
autoplay: true,//可选选项，自动滑动
initialSlide :1,//默认显示第二张图片索引从0开始
speed:2000,//设置过度时间
/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
autoplay : {
delay:3000
}, /* 设置每隔3000毫秒切换 */
pagination: {
el: '.swiper-pagination',
clickable :true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
hide:true,
},
/* 设置当鼠标移入图片时是否停止轮播*/
autoplay: {
disableOnInteraction: false,
},
});
css 页面自动渐变 效果如下：
自动渐变颜色
body
{
margin: 0;
padding: 0;
background: linear-gradient(70deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400%;
animation: bganimation 5s infinite;
}
.btn
{
color: white;
text-align: center;
text-transform: uppercase;
margin: 400px 0;
font-size: 22px;
}
@keyframes bganimation
{
0%{
background-position: 50% 50%;
}
50%{
background-position: 100% 100%;
}
100%{
background-position: 50% 50%;
}
}
标签：轮播,auto,button,50%,js,自动,background,rem,swiper
来源： /juxueliang1314/article/details/106772814
