1. 老欧博客首页
  2. 网站建设

如何在网站上添加图片轮播功能

• 网站建设

如何在网站上添加图片轮播功能

.slideshow {

max-width: 600px;

height: 250px;

margin: auto;

position: relative;

}

.slideshow img {

width: 100%;

height: auto;

position: absolute;

transition: opacity 1s ease-in-out;

}

#img1:target~.slideshow #s4,

#img2:target~.slideshow #s1,

#img2:target~.slideshow #s5,

#img3:target~.slideshow #s2,

#img3:target~.slideshow #s6,

#img4:target~.slideshow #s3 {

opacity:0;

}

.slide-navigation {

margin-top:20px;

text-align: center;

}

.slide-navigation a {

border-radius: 50%;

display: inline-block;

background-color: gray;

width:12px;

height:12px;

text-decoration:none;

}

.slide-navigation .active {

background-color: white;

}

@media only screen and (max-width: 800px) {

.slideshow {

height: 200px;

max-width: 350px;

}

}

$(document).ready(function(){

$(‘.owl-carousel’).owlCarousel({

loop:true,

margin:10,

nav:true,

autoplay:true,

autoplayTimeout:3000,

responsive:{

0:{

items:1

},

600:{

items:3

},

1000:{

items:5

}

}

})

});

本站部分内容由互联网用户自发贡献，该文观点仅代表作者本人，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规等内容，请举报！一经查实，本站将立刻删除。
上一篇 2023-06-11 14:48:24
下一篇 2023-06-11 14:50:42

相关推荐

本站部分内容由互联网用户自发贡献，该文观点仅代表作者本人，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规等内容，请<举报！一经查实，本站将立刻删除。