jQuery實現旋轉幻燈片輪播效果（附程式碼）
- php中世界最好的语言原創
- 2018-04-24 10:16:502398瀏覽
這次帶給大家jQuery實現旋轉幻燈片輪播效果（附程式碼），jQuery實現旋轉幻燈片輪播效果的注意事項有哪些，下面就是實戰案例，一起來看一下。
特點
#反應式－適應任何視窗的寬度
混合內容
不需要CSS
-
#輕量級(< 8 kb未壓縮)
基於jQuery建置
整合映像預先載入
- 多個可設定選項
- 延遲載入圖片
- 自動旋轉
- 容易擴展
#jquery實例：anoSlide使用方法
引入核心檔<script src="js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anoslide.js"></script></p>寫入基礎CSS樣式，可依專案完全自訂<p style="text-align: left;"></p>
<pre class="brush:php;toolbar:false">.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$('.carousel ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev',
next: 'a.next',
lazy: true,
auto: 4000
})
html
<p class="carousel">
<a class="prev"></a>
<ul>
<li>Content goes here</li>
<li>Content goes here</li>
<li>Content goes here</li>
</ul>
<a class="next"></a>
</p>
$('.carousel[data-mixed] ul').anoSlide(
{
items: 5,
speed: 500,
prev: 'a.prev[data-prev]',
next: 'a.next[data-next]',
lazy: true,
delay: 100})
HTML<p class="carousel" data-mixed=""> <a class="prev" data-prev=""></a> <ul> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/1.jpg" src="images/slides/1.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/2.jpg" src="images/slides/2.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/3.jpg" src="images/slides/3.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/4.jpg" src="images/slides/4.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/5.jpg" src="images/slides/5.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/6.jpg" src="images/slides/6.jpg"></figure> </p> </li> <li> <p class="wrap"> <figure><img src="images/slides/thumbnails/7.jpg" src="images/slides/7.jpg"></figure> </p> </li> </ul> <a class="next" data-next=""></a> </p>jquery旋轉木馬anoSlide分頁
$('.carousel ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev[data-prev-paging]',
next: 'a.next[data-next-paging]',
lazy: true,
onConstruct: function(instance)
{
var paging = $('<p/>').addClass('paging fix').css(
{
position: 'absolute',
top: 1,
left:50 + '%',
width: instance.slides.length * 40,
marginLeft: -(instance.slides.length * 40)/2
})
/* Build paging */
for (i = 0, l = instance.slides.length; i < l; i++)
{
var a = $('<a/>').data('index', i).appendTo(paging).on(
{
click: function()
{
instance.stop().go($(this).data('index'));
}
});
if (i == instance.current)
{
a.addClass('current');
}
}
instance.element.parent().append(paging);
},
onStart: function(ui)
{
var paging = $('.paging');
paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');
}
})html
<p class="carousel"> <a class="prev"></a> <ul> <li>Content goes here</li> <li>Content goes here</li> <li>Content goes here</li> </ul> <a class="next"></a> </p>#
$('.carousel.captions ul').anoSlide(
{
items: 1,
speed: 500,
prev: 'a.prev[data-prev-caption]',
next: 'a.next[data-next-caption]',
lazy: true,
onStart: function(ui)
{
/* Remove existing caption in slide */
ui.slide.element.find('.caption').remove();
},
onEnd: function(ui)
{
/* Get caption content */
var content = ui.slide.element.data('caption');
/* Create a caption wrap element */
var caption = $('<p/>').addClass('caption').css(
{
position: 'absolute',
background: 'rgb(0,0,0)',
color: 'rgb(255,255,255)',
textShadow: 'rgb(0,0,0) -1px -1px',
opacity: 0.5,
top: -100,
left: 50,
padding: 20,
webkitBorderRadius: 5,
mozBorderRadius: 5,
borderRadius: 5
}).html(content);
/* Append caption to slide and animate it. Animation is really up to you. */
caption.appendTo(ui.slide.element).animate(
{
top:50
});
}
})# ##html###<p class="carousel captions"> <a class="prev" data-prev-caption></a> <ul> <li data-caption="Adding captions is really easy"> <figure><img src="images/slides/1.jpg" src="" /></figure> </li> <li data-caption="anoSlide's callback functions can be used for adding Captions"> <figure><img src="images/slides/2.jpg" src="" /></figure> </li> <li data-caption="<span style='color:#00f0ff'>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not."> <figure><img src="images/slides/3.jpg" src="" /></figure> </li> <li> <figure><img src="images/slides/4.jpg" src="" /></figure> </li> <li> <figure><img src="images/slides/5.jpg" src="" /></figure> </li> <li> <figure><img src="images/slides/6.jpg" src="" /></figure> </li> <li> <figure><img src="images/slides/7.jpg" src="" /></figure> </li> </ul> <a class="next" data-next-caption></a> <a class="badge"></a> </p>###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：###### ###jQuery PHP實作編輯表格並儲存方法############jquery實作表格本機排序步驟詳解（附程式碼）# ########
以上是jQuery實現旋轉幻燈片輪播效果（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn