Picrelated 是我正在努力的旋转木马。
单击“下一步”导航箭头，文本标题应首先淡出，然后图像块应向左滑动。当图像块滑动时 - 下一个标题会淡入。
我试过使用Nivo Slider和BX Slider，但是永久失败了。
你能建议我使用任何有用的jquery插件或者这样做吗？
答案 0 :(得分：0)
嘿试试这段代码。
<style>
#slideshow #slidesContainer
{
margin: 0 auto;
width: 300px;
height: 263px;
overflow: auto; /* allow scrollbar */
position: relative;
}
#slideshow #slidesContainer .slide
{
margin: 0 auto;
width: 300px; /* reduce by 20 pixels to avoid horizontal scroll */
height: 263px;
display: none;
}
#slideshow #slidesContainer .slide img
{
margin: 0 auto;
width: 290px; /* reduce by 20 pixels to avoid horizontal scroll */
height: 263px;
}
/**
* Slideshow controls style rules.
*/
.control
{
display: block;
width: 39px;
height: 263px;
text-indent: -10000px;
position: absolute;
cursor: pointer;
}
#leftControl
{
top: 0;
left: 0;
background: transparent url(http://cdn1.iconfinder.com/data/icons/fs-icons- ubuntu-by-franksouza-/128/go-previous.png) no-repeat 0 0;
}
#rightControl
{
top: 0;
right: 0;
background: transparent url(http://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/sq_br_next.png) no-repeat 0 0;
}
.active
{
color: red;
}
</style>
Js Code Is
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 300;
var slides = $('.slide');
var numberOfSlides = slides.length;
var timer = 3000;
var img1, img2;
var sliderLink = $("#slider a");
var direction = 1;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner // Float left to display horizontally, readjust .slides width
slides.wrapAll('<div id="slideInner"></div>').css({
'float': 'left',
'width': slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert left and right arrow controls in the DOM
$('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');
// Hide left arrow control on first load
// manageControls(currentPosition);
// manageSlide();
// Create event listeners for .controls clicks
$('#rightControl').bind('click', rightControl);
$('#leftControl').bind('click', leftControl);
function leftControl() {
var butonid = 0;
direction = 0;
$("#slideInner").stop();
$("#slideInner").dequeue();
$('#timer').stop();
$('#timer').dequeue();
$('#leftControl').unbind('click');
manageSlide(0, direction);
setTimeout(function () {
$('#leftControl').bind('click', leftControl);
}, timer, null);
}
function rightControl() {
var butonid = 1;
direction = 1;
$("#slideInner").stop();
$("#slideInner").dequeue();
$('#timer').stop();
$('#timer').dequeue();
$('#rightControl').unbind('click');
manageSlide(0, direction);
setTimeout(function () {
$('#rightControl').bind('click', rightControl);
}, timer, null);
}
var slideIndex = 0;
var data = $("#slideInner .slide").toArray();
$("#slideInner").empty();
function manageSlide(auto, idButtonid) {
$("#slideInner").empty();
// console.log(slideIndex);
if (idButtonid == 0) {
$("#slideInner").css({ 'marginLeft': "-300px" });
$(data).each(function (index) {
// if (index == slideIndex - 1) {
// $(this).show();
// } else {
$(this).hide();
// }
});
$(data[slideIndex - 1]).show();
if (slideIndex == numberOfSlides - 1) {
slideIndex = 0;
img1 = data[0];
img2 = data[numberOfSlides - 1];
$("#slideInner").append(img1);
$("#slideInner").append(img2);
$(img2).show();
$(img1).show();
} else {
img1 = data[slideIndex];
img2 = data[slideIndex + 1];
$("#slideInner").append(img2);
$("#slideInner").append(img1);
$(img1).show();
$(img2).show();
slideIndex = slideIndex + 1;
}
$('#slideInner').animate({
'marginLeft': "0px"
}, 'slow', function () {
$('#timer').animate({
opacity: 1
}, timer, function () {
console.log('leftControl');
manageSlide(1, direction);
});
});
}
// right move here
else if (idButtonid == 1) {
$("#slideInner").css({ 'marginLeft': "0px" });
$(data).each(function (index) {
if (index == slideIndex + 1) {
$(this).show();
} else {
$(this).hide();
}
});
if (slideIndex == numberOfSlides - 1) {
slideIndex = 0;
img1 = data[0];
img2 = data[numberOfSlides - 1];
$("#slideInner").append(img2);
$("#slideInner").append(img1);
$(img2).show();
$(img1).show();
} else {
img1 = data[slideIndex];
img2 = data[slideIndex + 1];
$("#slideInner").append(img1);
$("#slideInner").append(img2);
$(img1).show();
$(img2).show();
slideIndex = slideIndex + 1;
}
$('#slideInner').animate({
'marginLeft': slideWidth * (-1)
}, 'slow', function () {
console.log('rightControl');
$('#timer').animate({
opacity: 1
}, timer, function () {
manageSlide(1, direction);
});
});
}
if (auto == 1) {
sliderLink.each(function () {
$(this).removeClass();
if ($(this).text() == (slideIndex + 1)) {
$(this).addClass('active');
}
});
}
auto = 1;
}
$("#slider a").click(function () {
sliderLink.each(function () {
$(this).removeClass();
});
slideIndex = $(this).addClass('active').text() - 1;
$('#timer').stop();
$('#timer').dequeue();
$("#slideInner").stop();
$("#slideInner").dequeue();
manageSlide(0, direction);
});
manageSlide(1, direction);
});
HTML代码
<body>
<div style="width: 560; overflow: hidden" align="center">
<!-- Slideshow HTML -->
<div id="timer">
</div>
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<!-- Content for slide 1 goes here -->
<img src="http://www.themobileindian.com/images/nnews/2012/10/8999/Apple-logo.jpg" />
<span>I need some he file. I have normal javascript, as well as Jquery. Here </span>
</div>
<div class="slide">
<!-- Content for slide 2 goes here. -->
<img src="http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg">
<span>I to move it to it's own file. I have normal javascript, as well as Jquery. Here
</span>
</div>
<div class="slide">
<!-- Content for slide 3 goes here. -->
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSnyrnGRAcKu3bY2bLUiCDnPetbKT97o892huSfYQv148ERpRFJ" />
<span>I need some help with this... I wrote all of my javascript code within the .html
file withing the brackets. I need to move it to it's own file. I have normal javascript,
as well as Jquery. Here </span>
</div>
<div class="slide">
<img src="http://i.livescience.com/images/i/000/034/622/i02/bioscapes3.jpg" />
<span>within the .html file withing the brackets. I need to move it to it's own file.
I have normal javascript, as well as Jquery. Here </span>
</div>
<div class="slide">
<img src="http://www.thinkstockphotos.in/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg" />
<span>I need some help with this.. have normal javascript, as well as Jquery. Here
</span>
</div>
</div>
<div id="slider">
<a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)">
3</a> <a href="javascript:void(0)">4</a> <a href="javascript:void(0)">5</a>
</div>
</div>
<!-- Slideshow HTML -->
</div>
演示请在此处导航.... See Demo