js轮播图自动切换和css页面自动渐变

效果如下：

可以去jq官网学习：http://www.jq22.com/

部分代码如下：

*{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

来源： https://blog.csdn.net/juxueliang1314/article/details/106772814