我一直在看一些预制滑块,除了使用方向箭头/按钮滑动外,还可以使用按钮调用它们。目前正在尝试完成我的滑块。到目前为止,我已经设法让它左右滑动。现在我打算创建一个控件来手动幻灯片。让我们说如果点击幻灯片4按钮它将显示幻灯片按钮。
我现在面临的困境是,自从我使用if/else
创建滑块后,我不确定是否可以在当前构建中添加控件。我在想是否应该重新创建它并使用javascript数组构建它。我似乎无法找到如何构建它的教程。
以下是我当前版本的预览
$(document).ready(function() {
function timelineSlider() {
var position = 0,
sliderContainer = $('.slider-container').width(),
slider = $('.slider-container .slider'),
sliderItems = $('.slider li'),
totalSlides = $('.slider li').length;
slider.width(sliderContainer*totalSlides);
sliderItems.outerWidth(sliderContainer);
//next slide
$('.next').click(function(){
slideRight();
});
//previous slide
$('.prev').click(function(){
slideLeft();
});
function slideLeft(){
position --;
if ( position == -1 ) { position = totalSlides-1; }
slider.css('left', - (sliderContainer*position));
console.log(position);
}
function slideRight(){
position ++;
if( position == totalSlides ) { position = 0; }
slider.css('left', - (sliderContainer*position ));
}
}
timelineSlider();
$(window).resize(function() {
timelineSlider();
})
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
.wrapper {
max-width: 1440px;
margin: 0 auto; }
.slider-container {
width: 1160px;
max-width: 1160px;
margin: 0 auto;
overflow: hidden; }
@media only screen and (max-width: 768px) {
.slider-container {
width: 100%;
max-width: 100%; } }
@media only screen and (max-width: 480px) {
.slider-container {
width: 100%;
max-width: 100%; } }
.slider-container .slider {
position: relative;
overflow: hidden;
left: 0;
list-style: none;
-webkit-transition: all 0.3s linear; }
.slider-container .slider li {
float: left;
width: 200px;
padding: 40px; }
/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="slider-container">
<ul class="slider">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</li>
</ul>
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
答案 0 :(得分:0)
我更改了您的代码,但这不是最终代码:
var x;
timelineSlider = function() {
var position = 0,
sliderContainer = $('.slider-container').width(),
slider = $('.slider-container .slider'),
sliderItems = $('.slider li'),
totalSlides = $('.slider li').length;
slider.width(sliderContainer * totalSlides);
sliderItems.outerWidth(sliderContainer);
//next slide
$('.next').click(function() {
slideRight();
});
//previous slide
$('.prev').click(function() {
slideLeft();
});
function slideLeft() {
position--;
if (position == -1) {
position = totalSlides - 1;
current = totalSlides - 1;
}
slider.css('left', -(sliderContainer * position));
current--;
$('#res').html(current);
console.log(position);
}
function slideRight() {
position++;
if (position == totalSlides) {
position = 0;
current = 0;
}
current++;
$('#res').html(current);
slider.css('left', -(sliderContainer * position));
}
var current = 1;
this.moveTo = function(index) {
if (current > index) {
for (var i = current; i > index; i--) {
slideLeft();
}
} else if (current < index) {
for (var i = current; i < index; i++) {
slideRight();
}
}
}
}
$('#goto2').click(function() {
x.moveTo(2);
})
$(document).ready(function() {
x = new timelineSlider();
$(window).resize(function() {
timelineSlider();
})
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.wrapper {
max-width: 1440px;
margin: 0 auto;
}
.slider-container {
width: 1160px;
max-width: 1160px;
margin: 0 auto;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
.slider-container {
width: 100%;
max-width: 100%;
}
}
@media only screen and (max-width: 480px) {
.slider-container {
width: 100%;
max-width: 100%;
}
}
.slider-container .slider {
position: relative;
overflow: hidden;
left: 0;
list-style: none;
-webkit-transition: all 0.3s linear;
}
.slider-container .slider li {
float: left;
width: 200px;
padding: 40px;
}
/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="slider-container">
<ul class="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<button id="goto2">Go to 2</button>
<div id="res"></div>