带有文本淡入淡出的jQuery旋转木马 [英] Jquery carousel with fading text
本文介绍了带有文本淡入淡出的jQuery旋转木马的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Picrelated 是一个轮播在挣扎中.
Picrelated is a carousel i'm struggling with.
通过单击下一个"导航箭头，文本标题应先淡出，然后图像块应向左滑动.当图像块滑动时-下一个字幕会淡入.
我尝试使用Nivo Slider和BX Slider，但永久失败.
I've tried to use Nivo Slider and BX Slider, but failed permanently.
您能建议我任何有用的jquery插件或执行此操作的方法吗?
Can you suggest me any helpful jquery plugin or the way to do this?
推荐答案
嘿，尝试这段代码.
<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代码是
$(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>
对于演示，请在这里导航....请参见演示
For Demo Please Navigate here....See Demo
这篇关于带有文本淡入淡出的jQuery旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
