爱站程序员基地js轮播图自动切换和css页面自动渐变
效果如下：
可以去jq官网学习：http://www.jq22.com/
部分代码如下：
<div class=\"swiper-container\" id=\"case1\"><div class=\"swiper-wrapper\"><div class=\"swiper-slide\"><img src=\"img/t1.png\" ></div><div class=\"swiper-slide\"><img src=\"img/t2.png\" ></div><div class=\"swiper-slide\"><img src=\"img/t4.png\" ></div></div><!-- 导航按钮 上一页下一页 --><div class=\"swiper-button-prev\"></div><div class=\"swiper-button-next\"></div><!-- 分页器 --><div class=\"swiper-pagination\"></div><!-- 滚动条 --><div class=\"swiper-scrollbar\"></div></div>
<style type=\"text/css\">*{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;}</style>
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,},});</script>
css 页面自动渐变 效果如下：
<div class=\"btn\"><p>自动渐变颜色</p></div>
<style>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%;}}</style>
