我们中有些人可能不希望使用，因为他们的高规格和创建与当前的JavaScript冲突possibilty现成的插件。
我用的是轻滑块插件前，但是当顾客提供了模块化的修改，它成为真的很难操纵。 然后，我的目标是建立矿山的轻松定制它。 我相信滑块不应该是复杂的，从开始建造。
什么是建立jQuery的图像滑块简单和干净的方式？
Answer 1:
检查实例之前，你应该知道，我使用最多两个jQuery的功能。
指数（）返回值是表示所述第一元素的jQuery对象相对于其兄弟元素中的位置的整数。
当量（）选择是根据它的位置（索引值）的元素的。
Basicly我把选择的触发元件的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响应：
（ 触发器+下一个/上点击定时 ）
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);
}
Answer 2:
下面是一个简单，易于理解创建使用JavaScript，而无需使用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" />
Answer 3:
我最近创建了图像的画廊，并单击图像时apears滑块的解决方案。
看看这里的代码： 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> Answer 4:
结帐这一大堆的代码来构建简单的jQuery图像滑块。 复制并保存此文件到本地机器上测试它。 您可以根据您的要求进行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var current_img = 1;
var i;
$(document).ready(function(){
var imgs = $("#image").find("img");
function show_img(){
for (i = 1; i < imgs.length+1; i++) {
if(i == current_img){
$(imgs[i-1]).show();
}else{
$(imgs[i-1]).hide()
}
}
}
$("#prev").click(function(){
if(current_img == 1){
current_img = imgs.length;
}else{
current_img = current_img - 1
}
show_img();
});
$("#next").click(function(){
if(current_img == imgs.length){
current_img = 1;
}else{
current_img = current_img + 1
}
show_img();
});
});
</script>
</head>
<body>
<div style="margin-top: 100px;"></div>
<div class="container">
<div class="col-sm-3">
<button type="button" id="prev" class="btn">Previous</button>
</div>
<div class="col-sm-6">
<div id="image">
<img src="https://www.w3schools.com/html/pulpitrock.jpg" alt="image1">
<img src="https://www.w3schools.com/cSS/img_forest.jpg" alt="image2" hidden="true" style="max-width: 500px;">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="image3" hidden="true">
</div>
</div>
<div class="col-sm-3">
<button type="button" id="next" class="btn">Next</button>
</div>
</div>
</body>
</html>
Answer 5:
我已经写上创建幻灯片的教程， 教程页面万一链路失效我已经包含在我的回答如下的代码。
在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) });
}
});
文章来源: How to build simple jQuery image slider with sliding or opacity effect?
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 相关推荐>> 的文章《如何建立简单的jQuery的图像滑块滑动或不透明的效果呢？(How to build simple 》','https://www.manongdao.com/article-972134.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}