带有褪色文本的 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屋！
查看全文
