Dieses Mal bringe ich Ihnen jQuery, um den rotierenden Folienkarusselleffekt zu realisieren (mit Code). Was sind die Vorsichtsmaßnahmen für jQuery, um den rotierenden Folienkarusselleffekt zu realisieren? Schauen Sie einmal vorbei.
Funktionen
Callback-Funktion— —onConstruct onStart ,onEnd
JQuery-Beispiel: AnoSlide-Verwendungsmethode
Kerndateien einführen
<script src="js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anoslide.js"></script>Schreiben Sie grundlegende CSS-Stile, die vollständig an das Projekt anpassbar sind<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 carousel anoSlide gemischte Anzeige
$('.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>jquery slide anoSlide multi-picture
$('.carousel[data-mixed] ul').anoSlide(
{
items: 5,
speed: 500,
prev: 'a.prev[data-prev]',
next: 'a.next[data-next]',
lazy: true,
delay: 100})<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 carousel anoSlide-Paginierung
$('.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');
}
})<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>
jquery slide anoSlide title
$('.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
});
}
})<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>
jQuery+PHP implementiert die Methode zum Bearbeiten und Speichern von Tabellen
Detaillierte Erläuterung der Schritte zur lokalen Implementierung Sortieren von Tabellen mit jQuery (mit Code)
Das obige ist der detaillierte Inhalt vonjQuery implementiert den rotierenden Folienkarusselleffekt (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
