时间:2021-07-01 10:21:17 帮助过:23人阅读
特点
jquery实例:anoSlide使用方法
引入核心文件
写入基础CSS样式,可根据项目完全自定义
.carousel {
position: relative;
min-height: 20px;
height: auto !important;
height: 20px;
background: url(images/loader.gif) center center no-repeat;
}
.carousel .next, .carousel .prev {
display: none;
width: 56px;
height: 56px;
position: absolute;
bottom: 20px;
left: 50%;
margin-top: -28px;
z-index: 9999;
cursor: pointer;
}
.carousel .prev {
margin-left: -60px;
background: url(images/prev.png) 0 0 no-repeat;
}
.carousel .next {
margin-right: -60px;
background: url(images/next.png) 0 0 no-repeat;
}
.carousel li {
display: none;
}
.carousel li img {
width: 100%;
height: auto;
}
.paging {
position: absolute;
z-index: 9998;
}
.paging > a {
display: block;
cursor: pointer;
width: 40px;
height: 40px;
float: left;
background: url(images/dots.png) 0px -40px no-repeat;
}
.paging > a:hover, .paging > a.current {
background: url(images/dots.png) 0px 0px no-repeat;
}
.badge {
display: block;
width: 104px;
height: 104px;
background: url(images/badge.png) 0 0 no-repeat;
z-index: 9000;
position: absolute;
top: -3px;
left: -3px;
}
img {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
jquery旋转木马anoSlide混合显示

JS
jquery幻灯片anoSlide多图

JS
HTML
jquery旋转木马anoSlide分页

js
html
- Content goes here
- Content goes here
- Content goes here
jquery幻灯片anoSlide标题

js
html
以上就是关于jQuery旋转木马式幻灯片轮播特效,希望对大家的学习有所帮助。