How to Create Simple jQuery Image Sliders with Sliding or Opacity Effects
Many developers prefer to avoid using pre-built plugins due to concerns about size or potential conflicts with existing JavaScript. For those who prefer to create their own sliders, here's a simplified approach using jQuery:
Key jQuery Functions:
Approach:
1. FadeIn / FadeOut Effect
HTML:
<ul class="images"> ... </ul> <ul class="triggers"> ... </ul>
CSS:
ul.images { position:relative; } ul.images li { position:absolute; }
jQuery:
var target; var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length-1; triggers.first().addClass('active'); images.hide().first().show(); function sliderResponse(target) { images.fadeOut(300).eq(target).fadeIn(300); triggers.removeClass('active').eq(target).addClass('active'); }
2. Sliding Effect
HTML:
Same as for the FadeIn/FadeOut effect.
CSS:
.mask { ... } ul.images { ... } ul.images li { ... }
jQuery:
var target; var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length-1; var mask = $('.mask ul.images'); var imgWidth = images.width(); triggers.first().addClass('active'); mask.css('width', imgWidth*(lastElem+1) +'px'); function sliderResponse(target) { mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300); triggers.removeClass('active').eq(target).addClass('active'); }
Shared jQuery Response for Both Sliders:
triggers.click(function() { ... }); $('.next').click(function() { ... }); $('.prev').click(function() { ... }); function sliderTiming() { ... } function resetTiming() { ... }
The above is the detailed content of How to Build Simple jQuery Image Sliders with Fade or Slide Effects?. For more information, please follow other related articles on the PHP Chinese website!