Response title
This is preview!
How to make an existing rotating banner autoscroll?
in Using jQuery
•
9 years ago
Hello all,
I have adopted this jQuery code from an old website and currently it works great by just clicking the arrows to animate the panels left and right. The client wants it to be automated now. Is there an easy way to modify the jQuery to do this or am I better starting from scratch? I do have beginners level jQuery but this is slightly beyond me.
Current code:
<script type="text/javascript">
$('#focusInner .panel:last').clone(true).insertBefore('#focusInner .panel:first').css({'display':'none','width':'0'});
$('#focusInner .panel:last').remove();
$('#scrollInner .smallPanel:first').css({'display':'none','width':'0'});
$("#prevArr").one('click', clickBack);
$("#featureIcons ul li:first-child").addClass("on");
function clickBack() {
$('#focusInner .panel:first').show();
$('#focusInner .panel:first').stop().animate({
width: '980px'
}, 1000, function () {
$('#focusInner .panel:last').clone(true).insertBefore('#focusInner .panel:first').css({ 'display': 'none', 'width': '0' });
$('#focusInner .panel:last').remove();
var selectedID = $("#featureIcons ul li.on").attr("id");
$("#featureIcons ul li.on").removeClass("on");
if ($('#' + selectedID).is(':first-child')) {
$("#featureIcons ul li:last-child").addClass("on");
} else {
$("#" + selectedID).prev().addClass("on");
}
$("#prevArr").one('click', clickBack);
});
return false;
}
$("#nextArr").one('click', clickForward);
function clickForward() {
$('#focusInner .panel:first').next().stop().animate({
width: '0'
}, 1000, function () {
$('#focusInner .panel:first').clone(true).insertAfter('#focusInner .panel:last').css({ 'display': 'block', 'width': '980px' });
var selectedID = $('#focusInner .panel:first').next().attr("id");
$(".ind").removeClass("on");
$("#" + selectedID.substring(1)).addClass("on");
$("#focusInner .panel:first").remove();
var selectedID = $("#featureIcons ul li.on").attr("id");
$("#featureIcons ul li.on").removeClass("on");
if ($('#' + selectedID).is(':last-child')) {
$("#featureIcons ul li:first-child").addClass("on");
} else {
$("#" + selectedID).next().addClass("on");
}
$("#nextArr").one('click', clickForward);
});
return false;
}
</script>
Many thanks for any help offered.
Deb
1