jQuery implementiert das Fokuskarten-Animations-Plug-in mit horizontalem slider_jquery

Dies ist ein sehr praktisches jQuery-Fokuskarten-Animations-Plug-in. Es verfügt über einen horizontalen Schieberegler. Sie können Bilder wechseln, indem Sie den Schieberegler verschieben oder auf „Bild“ klicken. Diese Fokuskarte wird ausschließlich mit jQuery implementiert. Sie weist eine gute Kompatibilität und Praktikabilität auf. Sie ist außerdem relativ einfach und kann problemlos in erforderliche Projekte integriert werden.

Die Wirkung zeigt sich wie folgt:

HTML-Code

<div id="wrapper">
<ul id="flip">
<li title="The first image" ><img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy" / alt="jQuery implementiert das Fokuskarten-Animations-Plug-in mit horizontalem slider_jquery" ></li>
<li title="A second image" ><img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy" / alt="jQuery implementiert das Fokuskarten-Animations-Plug-in mit horizontalem slider_jquery" ></li>
<li title="This is the description" ><img  src="/static/imghwm/default1.png"  data-src="5.png"  class="lazy" / alt="jQuery implementiert das Fokuskarten-Animations-Plug-in mit horizontalem slider_jquery" ></li>
<li title="Another description" ><img  src="/static/imghwm/default1.png"  data-src="4.png"  class="lazy" / alt="jQuery implementiert das Fokuskarten-Animations-Plug-in mit horizontalem slider_jquery" ></li>
<li title="A title for the image" ><img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy" / alt="jQuery implementiert das Fokuskarten-Animations-Plug-in mit horizontalem slider_jquery" ></li>
</ul>
<div id="scrollbar"></div>
</div>

CSS-Code

.ui-jcoverflip {
position: relative;
}
.ui-jcoverflip--item {
position: absolute;
display: block;
}
/* Basic sample CSS */
#flip {
height: 200px;
width: 630px;
margin-bottom: 50px;
}
#flip .ui-jcoverflip--title {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
color: #555;
}
#flip img {
display: block;
border: 0;
outline: none;
}
#flip a {
outline: none;
}
#wrapper {
height: 300px;
width: 630px;
overflow: hidden;
position: relative;
}
.ui-jcoverflip--item {
cursor: pointer;
}
body {
font-family: Arial, sans-serif;
width: 630px;
padding: 0;
margin: 0;
}
ul,
ul li {
margin: 0;
padding: 0;
display: block;
list-style-type: none;
}
#scrollbar {
position: absolute;
left: 20px;
right: 20px;
}

jQuery-Code

jQuery( document ).ready( function(){
jQuery( '#flip' ).jcoverflip({
current: 2,
beforeCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
];
},
afterCss: function( el, container, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
];
},
currentCss: function( el, container ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
$.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
];
},
change: function(event, ui){
jQuery('#scrollbar').slider('value', ui.to*25);
}
});
jQuery('#scrollbar').slider({
value: 50,
stop: function(event, ui) {
if(event.originalEvent) {
var newVal = Math.round(ui.value/25);
jQuery( '#flip' ).jcoverflip( 'current', newVal );
jQuery('#scrollbar').slider('value', newVal*25);
}
}
});
});

Der obige Code dient dazu, dass jQuery ein Fokuskarten-Animations-Plug-in mit einem horizontalen Schieberegler implementiert. Ich hoffe, dass er für alle hilfreich ist!