html轮播图添加⽂字,（swiper插件）轮播图，下⾯的⽂字随图 ⽚进⾏翻页
效果：(图⽚来源⽹路)
Html:
⼴播通知：你好 你好你好
扬州杀人案欢迎来到这⾥，welcome，这是轮播图的第⼆条消息 css:
*{
半距等高线margin:0;
padding:0;
}
.slider {100%;
max-1920px;
min-900px;
margin: auto;
min-height: 300px;
}
.swiper-container {100%;
height:100%;
}
树立和落实
科学发展观
.swiper-slide img {100%;/*height: 706px;*/}.page_center {
1260px;
margin:auto;
position: relative;
}
.slider .slider_media {
height: 60px;
line-height: 60px;100%;
position: relative;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
box-shadow: 00px 5px #bcbcbc;-webkit-box-shadow: 00px 5px #bcbcbc;-moz-box-shadow: 00px 5px #bcbcbc;-ms-box-shadow: 00px 5px #bcbcbc;国光初级中学
}
.slider .media_text {
text-indent: 40px;
background: url('./icon_message.png') no-repeat left 15px;
}
雯雯工地农民工
灌浆.slider .media_text a {font-size: 16px;
color: #000000;
}
a
{
text-decoration: none;
color: #000;
}
a:focus{outline:none;}
.slider .swiper-pagination {
right:0;
top:0;
}
.
slider .swiper-pagination-bullet {
margin-left: 12px;
}
js:
$(".slider_media a").hide();
$(".slider_media a").eq(0).show();var swiper = new Swiper('.swiper-container', {
speed:500,
pagination: {
el:'.swiper-pagination',
},
loop:true,
autoplay: {
delay:3000,
disableOnInteraction:false,
},
on: {
slideChangeTransitionStart:function(){
$(".slider_media a").hide();
edcnhs$(".slider_media a").eq((this.activeIndex-1)%2).fadeIn(300); }
}
});
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议