我对编程非常陌生,我正在研究照片滑块的概念,当用户点击下一个箭头时,图像源会从我的li标签列表更改为下一个图像源。但是,我到了列表的末尾,如果当前图像源相同且未更改,我希望拥有相同的图像源。我觉得我好像很亲密!谢谢!
我的HTML:
<div id="wrapper">
<div class="left-arrow">
<i class="arrow left"></i>
</div>
<div class="image-holder"></div>
<div class="right-arrow">
<i class="arrow right"></i>
</div>
</div>
我的JavaScript / JQuery:
$(document).ready(function() {
// global variables
var $firstImg = $('.firstImg').attr('src');
var $lastImg = $('.lastImg').attr('src');
// get image src of the li with the class "active"
var $imageSrc = $('li.active>img').attr('src');
// append the image src of active into the div with class "image-holder"
$('.image-holder').append("<img src='" + $imageSrc + "'" + " class='placeImg'>");
// change src of image when user clicks the right arrow
$('.right').on('click', function() {
if ($('li.active').next().length > 3)) {
var $next = $('li.active').next();
var $nextSrc = $next.children('img').attr('src');
$('.placeImg').removeAttr('src');
$('.placeImg').attr('src', $nextSrc);
if ($('li').hasClass('active')) {
$('li').removeClass('active');
}
$next.addClass('active');
} else {
$('.placeImg').attr('src', $lastImg);
}
});
// change src of image when user clicks the left arrow
$('.left').on('click', function() {
var $prev = $('li.active').prev();
var $prevSrc = $prev.children('img').attr('src');
$('.placeImg').removeAttr('src');
$('.placeImg').attr('src', $prevSrc);
if ($('li').hasClass('active')) {
$('li').removeClass('active');
}
$prev.addClass('active');
});
});
答案 0 :(得分:2)
我自己想通了!这是新代码!
我的HTML:
<ul class="images">
<li class="active"><img src="images/htmllogolg.png" alt="html" class="firstImg"></li>
<li><img src="images/csslogolg.png" alt="css"></li>
<li><img src="images/jslogolg.png" alt="js" class="lastImg"></li>
</ul>
<div id="wrapper">
<div class="left-arrow">
<i class="arrow left"></i>
</div>
<div class="image-holder"></div>
<div class="right-arrow">
<i class="arrow right"></i>
</div>
</div>
我的JavaScript:
$(document).ready(function() {
// global variables
var $firstImg = $('.firstImg').attr('src');
var $lastImg = $('.lastImg').attr('src');
// get image src of the li with the class "active"
var $imageSrc = $('li.active>img').attr('src');
// append the image src of active into the div with class "image-holder"
$('.image-holder').append("<img src='" + $imageSrc + "'" + " class='placeImg'>");
// change src of image when user clicks the right arrow
$('.right').on('click', function() {
var $next = $('li.active').next();
var $nextSrc = $next.children('img').attr('src');
if ($('.placeImg').attr('src') == $lastImg) {
$('.placeImg').attr('src', $lastImg);
} else {
$('.placeImg').removeAttr('src');
$('.placeImg').attr('src', $nextSrc);
if ($('li').hasClass('active')) {
$('li').removeClass('active');
}
$next.addClass('active');
}
});
// change src of image when user clicks the left arrow
$('.left').on('click', function() {
var $prev = $('li.active').prev();
var $prevSrc = $prev.children('img').attr('src');
if ($('.placeImg').attr('src') == $firstImg) {
$('.placeImg').attr('src', $firstImg);
} else {
$('.placeImg').removeAttr('src');
$('.placeImg').attr('src', $prevSrc);
if ($('li').hasClass('active')) {
$('li').removeClass('active');
}
$prev.addClass('active');
}
});
});