如何构build简单的jQuery图像滑块滑动或不透明效果？
我们中的一些人可能不想使用现成的插件，因为它们的大小和可能性与当前的JavaScript产生冲突。
我以前使用过轻量级的滑块插件，但是当客户进行模块化修改时，操作变得非常困难。 然后，我的目标是build立我的轻松自定义。 我相信滑块从一开始就不应该那么复杂。
构buildjQuery图像滑块的简单而干净的方法是什么？
在检查示例之前，您应该知道我最常用的两个jQuery函数。
index（）返回值是一个整数，指示jQuery对象中的第一个元素相对于其同级元素的位置。
eq（）根据它的位置（索引值）select一个元素。
基本上我select触发元素的index value并用eq方法匹配图像上的这个值。
淡入/淡出效果。
– 滑动效果。
– 备用滚轮响应。
html示例：
<ul class="images"> <li> <img src="images/1.jpg" alt="1" /> </li> <li> <img src="images/2.jpg" alt="2" /> </li> ... </ul> <ul class="triggers"> <li>1</li> <li>2</li> ... </ul> <span class="control prev">Prev</span> <span class="control next">Next</span>
不透明度影响 ： jsFiddle。
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'); }
滑动效果： jsFiddle。
CSS技巧：用双包装，并使用孩子作为面具
.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden; } ul.images { position:relative; top:0px;left:0px; } /* this width must be total of the images, it comes from jquery */ ul.images li { float:left; }
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'); }
两个滑块的常见jQuery响应：
（ 触发+ next / prev点击和计时 ）
triggers.click(function() { if ( !$(this).hasClass('active') ) { target = $(this).index(); sliderResponse(target); resetTiming(); } }); $('.next').click(function() { target = $('ul.triggers li.active').index(); target === lastElem ? target = 0 : target = target+1; sliderResponse(target); resetTiming(); }); $('.prev').click(function() { target = $('ul.triggers li.active').index(); lastElem = triggers.length-1; target === 0 ? target = lastElem : target = target-1; sliderResponse(target); resetTiming(); }); function sliderTiming() { target = $('ul.triggers li.active').index(); target === lastElem ? target = 0 : target = target+1; sliderResponse(target); } var timingRun = setInterval(function() { sliderTiming(); },5000); function resetTiming() { clearInterval(timingRun); timingRun = setInterval(function() { sliderTiming(); },5000); }
这里是一个简单而易于理解的代码，用于使用JavaScript创build图像幻灯片而不使用Jquery。
<script language="JavaScript"> var i = 0; var path = new Array(); // LIST OF IMAGES path[0] = "image_1.gif"; path[1] = "image_2.gif"; path[2] = "image_3.gif"; function swapImage() { document.slide.src = path[i]; if(i < path.length - 1) i++; else i = 0; setTimeout("swapImage()",3000); } window.onload=swapImage; </script> <img height="200" name="slide" src="image_1.gif" width="400" />
我写了一个关于创build幻灯片的教程 ， 教程页面如果链接变得无效，我在下面的答案中包含了代码。
html：
<div id="slideShow"> <div id="slideShowWindow"> <div class="slide"> <img src="”img1.png”/"> <div class="slideText"> <h2>The Slide Title</h2> <p>This is the slide text</p> </div> <!-- </slideText> --> </div> <!-- </slide> repeat as many times as needed --> </div> <!-- </slideShowWindow> --> </div> <!-- </slideshow> -->
CSS：
img { display: block; width: 100%; height: auto; } p{ background:none; color:#ffffff; } #slideShow #slideShowWindow { width: 650px; height: 450px; margin: 0; padding: 0; position: relative; overflow:hidden; margin-left: auto; margin-right:auto; } #slideShow #slideShowWindow .slide { margin: 0; padding: 0; width: 650px; height: 450px; float: left; position: relative; margin-left:auto; margin-right: auto; } #slideshow #slideshowWindow .slide, .slideText { position:absolute; bottom:18px; left:0; width:100%; height:auto; margin:0; padding:0; color:#ffffff; font-family:Myriad Pro, Arial, Helvetica, sans-serif; } .slideText { background: rgba(128, 128, 128, 0.49); } #slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p { margin:10px; padding:15px; } .slideNav { display: block; text-indent: -10000px; position: absolute; cursor: pointer; } #leftNav { left: 0; bottom: 0; width: 48px; height: 48px; background-image: url("../Images/plus_add_minus.png"); background-repeat: no-repeat; z-index: 10; } #rightNav { right: 0; bottom: 0; width: 48px; height: 48px; background-image: url("../Images/plus_add_green.png"); background-repeat: no-repeat; z-index: 10; }
jQuery的：
$(document).ready(function () { var currentPosition = 0; var slideWidth = 650; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 3000; //Assign a timer, so it will run periodically slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>'); slides.css({ 'float': 'left' }); //set #slidesHolder width equal to the total width of all the slides $('#slidesHolder').css('width', slideWidth * numberOfSlides); $('#slideShowWindow') .prepend('<span class="slideNav" id="leftNav">Move Left</span>') .append('<span class="slideNav" id="rightNav">Move Right</span>'); manageNav(currentPosition); //tell the buttons what to do when clicked $('.slideNav').bind('click', function () { //determine new position currentPosition = ($(this).attr('id') === 'rightNav') ? currentPosition + 1 : currentPosition - 1; //hide/show controls manageNav(currentPosition); clearInterval(slideShowInterval); slideShowInterval = setInterval(changePosition, speed); moveSlide(); }); function manageNav(position) { //hide left arrow if position is first slide if (position === 0) { $('#leftNav').hide(); } else { $('#leftNav').show(); } //hide right arrow is slide position is last slide if (position === numberOfSlides - 1) { $('#rightNav').hide(); } else { $('#rightNav').show(); } } //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked function changePosition() { if (currentPosition === numberOfSlides - 1) { currentPosition = 0; manageNav(currentPosition); } else { currentPosition++; manageNav(currentPosition); } moveSlide(); } //moveSlide: this function moves the slide function moveSlide() { $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) }); } });
我最近创build了一个解决scheme，包含一个图片库和一个图片点击的滑块。
看看这里的代码： GitHub代码
这里还有一个实例： 代码示例
var CreateGallery = function(parameters) { var self = this; this.galleryImages = []; this.galleryImagesSrcs = []; this.galleryImagesNum = 0; this.counter; this.galleryTitle = parameters.galleryTitle != undefined ? parameters.galleryTitle : 'Gallery image'; this.maxMobileWidth = parameters.maxMobileWidth != undefined ? parameters.maxMobileWidth : 768; this.numMobileImg = parameters.numMobileImg != undefined ? parameters.numMobileImg : 2; this.maxTabletWidth = parameters.maxTabletWidth != undefined ? parameters.maxTabletWidth : 1024; this.numTabletImg = parameters.numTabletImg != undefined ? parameters.numTabletImg : 3; this.addModalGallery = function(gallerySelf = self){ var $div = $(document.createElement('div')).attr({ 'id': 'modal-gallery' }).append($(document.createElement('div')).attr({ 'class': 'header' }).append($(document.createElement('button')).attr({ 'class': 'close-button', 'type': 'button' }).html('×') ).append($(document.createElement('h2')).text(gallerySelf.galleryTitle)) ).append($(document.createElement('div')).attr({ 'class': 'text-center' }).append($(document.createElement('img')).attr({ 'id': 'gallery-img' }) ).append($(document.createElement('button')).attr({ 'class': 'prev-button', 'type': 'button' }).html('◄') ).append($(document.createElement('button')).attr({ 'class': 'next-button', 'type': 'button' }).html('►') ) ); parameters.element.after($div); }; $(document).on('click', 'button.prev-button', {self: self}, function() { var $currImg = self.counter >= 1 ? self.galleryImages[--self.counter] : self.galleryImages[self.counter]; var $currHash = self.galleryImagesSrcs[self.counter]; var $src = $currImg.src; window.location.hash = $currHash; $('img#gallery-img').attr('src', $src); $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1)); }); $(document).on('click', 'button.next-button', {self: self}, function() { var $currImg = self.counter < (self.galleryImagesNum - 1) ? self.galleryImages[++self.counter] : self.galleryImages[self.counter]; var $currHash = self.galleryImagesSrcs[self.counter]; var $src = $currImg.src; window.location.hash = $currHash; $('img#gallery-img').attr('src', $src); $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1)); }); $(document).on('click', 'div#modal-gallery button.close-button', function() { $('#modal-gallery').css('position', 'relative'); $('#modal-gallery').hide(); $('body').css('overflow', 'visible'); }); parameters.element.find('a').on('click', {self: self}, function(event) { event.preventDefault(); $('#modal-gallery').css('position', 'fixed'); $('#modal-gallery').show(); $('body').css('overflow', 'hidden'); var $currHash = this.hash.substr(1); self.counter = self.galleryImagesSrcs.indexOf($currHash); var $src = $currHash; window.location.hash = $currHash; $('img#gallery-img').attr('src', $src); $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1)); }); this.sizeGallery = function(gallerySelf = self) { var $modalGallery = $(document).find("div#modal-gallery"); if($modalGallery.length <= 0) { this.addModalGallery(); } var $windowWidth = $(window).width(); var $parentWidth = parameters.element.width(); var $thumbnailHref = parameters.element.find('img:first').attr('src'); if($windowWidth < gallerySelf.maxMobileWidth) { var percentMobile = Math.floor(100 / gallerySelf.numMobileImg); var emMobile = 0; var pxMobile = 2; // var emMobile = gallerySelf.numMobileImg * 0.4; // var pxMobile = gallerySelf.numMobileImg * 2; parameters.element.find('img').css('width', 'calc('+percentMobile+'% - '+emMobile+'em - '+pxMobile+'px)'); } else if($windowWidth < gallerySelf.maxTabletWidth) { var percentTablet = Math.floor(100 / gallerySelf.numTabletImg); var emTablet = 0; var pxTablet = 2; // var emTablet = gallerySelf.numMobileImg * 0.4; // var pxTablet = gallerySelf.numMobileImg * 2; parameters.element.find('img').css('width', 'calc('+percentTablet+'% - '+emTablet+'em - '+pxTablet+'px)'); } else { var $thumbImg = new Image(); $thumbImg.src = $thumbnailHref; $thumbImg.onload = function() { var $thumbnailWidth = this.width; if($parentWidth > 0 && $thumbnailWidth > 0) { parameters.element.find('img').css('width', (Math.ceil($thumbnailWidth * 100 / $parentWidth))+'%'); } }; } }; this.startGallery = function(gallerySelf = self) { parameters.element.find('a').each(function(index, el) { var $currHash = el.hash.substr(1); var $img = new Image(); $img.src = $currHash; gallerySelf.galleryImages.push($img); gallerySelf.galleryImagesSrcs.push($currHash); }); this.galleryImagesNum = this.galleryImages.length; }; this.sizeGallery(); this.startGallery(); }; var myGallery; $(window).on('load', function() { myGallery = new CreateGallery({ element: $('#div-gallery'), maxMobileWidth: 768, numMobileImg: 2, maxTabletWidth: 1024, numTabletImg: 3 }); }); $(window).on('resize', function() { myGallery.sizeGallery(); });
#div-gallery { text-align: center; } #div-gallery img { margin-right: auto; margin-left: auto; } div#modal-gallery { top: 0; left: 0; width: 100%; max-width: none; height: 100vh; min-height: 100vh; margin-left: 0; border: 0; border-radius: 0; z-index: 1006; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: none; background-color: #fefefe; position: relative; margin-right: auto; overflow-y: auto; padding: 0; } div#modal-gallery div.header { position: relative; } div#modal-gallery div.header h2 { margin-left: 1rem; } div#modal-gallery div.header button.close-button { position: absolute; top: calc(50% - 1em); right: 1rem; } div#modal-gallery img { display: block; max-width: 98%; max-height: calc(100vh - 5em); margin-right: auto; margin-left: auto; } div#modal-gallery div.text-center { position: relative; } button.close-button { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 20px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #333; background-color: #fff; border-color: #ccc; } button.close-button:hover, button.close-button:focus { background-color: #ddd; } button.next-button:hover, button.prev-button:hover, button.next-button:focus, button.prev-button:focus { color: #fff; text-decoration: none; filter: alpha(opacity=90); outline: 0; opacity: .9; } button.next-button, button.prev-button { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); background-color: rgba(0,0,0,0); filter: alpha(opacity=50); opacity: .5; border: none; } button.next-button { right: 0; left: auto; background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5))); background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; } button.prev-button { background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001))); background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="div-gallery"> <a href="#http://placehold.it/1024x1024/ff0000/000000?text=Gallery+image+1"><img src="http://placehold.it/300x300/ff0000/000000?text=Gallery+image+1" alt=""></a> <a href="#http://placehold.it/1024x1024/ff4000/000000?text=Gallery+image+2"><img src="http://placehold.it/300x300/ff4000/000000?text=Gallery+image+2" alt=""></a> <a href="#http://placehold.it/1024x1024/ff8000/000000?text=Gallery+image+3"><img src="http://placehold.it/300x300/ff8000/000000?text=Gallery+image+3" alt=""></a> <a href="#http://placehold.it/1024x1024/ffbf00/000000?text=Gallery+image+4"><img src="http://placehold.it/300x300/ffbf00/000000?text=Gallery+image+4" alt=""></a> <a href="#http://placehold.it/1024x1024/ffff00/000000?text=Gallery+image+5"><img src="http://placehold.it/300x300/ffff00/000000?text=Gallery+image+5" alt=""></a> <a href="#http://placehold.it/1024x1024/bfff00/000000?text=Gallery+image+6"><img src="http://placehold.it/300x300/bfff00/000000?text=Gallery+image+6" alt=""></a> <a href="#http://placehold.it/1024x1024/80ff00/000000?text=Gallery+image+7"><img src="http://placehold.it/300x300/80ff00/000000?text=Gallery+image+7" alt=""></a> <a href="#http://placehold.it/1024x1024/40ff00/000000?text=Gallery+image+8"><img src="http://placehold.it/300x300/40ff00/000000?text=Gallery+image+8" alt=""></a> <a href="#http://placehold.it/1024x1024/00ff00/000000?text=Gallery+image+9"><img src="http://placehold.it/300x300/00ff00/000000?text=Gallery+image+9" alt=""></a> <a href="#http://placehold.it/1024x1024/00ff40/000000?text=Gallery+image+10"><img src="http://placehold.it/300x300/00ff40/000000?text=Gallery+image+10" alt=""></a> <a href="#http://placehold.it/1024x1024/00ff80/000000?text=Gallery+image+11"><img src="http://placehold.it/300x300/00ff80/000000?text=Gallery+image+11" alt=""></a> <a href="#http://placehold.it/1024x1024/00ffbf/000000?text=Gallery+image+12"><img src="http://placehold.it/300x300/00ffbf/000000?text=Gallery+image+12" alt=""></a> <a href="#http://placehold.it/1024x1024/00ffff/000000?text=Gallery+image+13"><img src="http://placehold.it/300x300/00ffff/000000?text=Gallery+image+13" alt=""></a> <a href="#http://placehold.it/1024x1024/00bfff/000000?text=Gallery+image+14"><img src="http://placehold.it/300x300/00bfff/000000?text=Gallery+image+14" alt=""></a> <a href="#http://placehold.it/1024x1024/0080ff/000000?text=Gallery+image+15"><img src="http://placehold.it/300x300/0080ff/000000?text=Gallery+image+15" alt=""></a> <a href="#http://placehold.it/1024x1024/0040ff/000000?text=Gallery+image+16"><img src="http://placehold.it/300x300/0040ff/000000?text=Gallery+image+16" alt=""></a> </div>
