我几乎完成了一个工作客户的网站,它在主页上有一个大的全宽动态滑块.由于它们提供的规格很少,目前滑块非常基本;它只需通过更改UL上的左侧CSS属性从左向右滚动.显然,因为它会在它到达终点时突然回滚到开头,客户显然不想要这样.
我不是jQuery的专家,我想知道如何轻松地更改此滑块,以便它将无限滚动.
它还使用了一个简单的导航,它有四个幻灯片,并在底部有一个小控件栏,每个控件栏上都有标题,可以快速跳转到特定的幻灯片.它还有一个箭头,跟随最新的幻灯片.
我找到了使其循环的解决方案,但我看不出任何与导航兼容的外观.我真的很想不必从头开始,这有可能吗？
这是我目前正在使用的所有代码,如果你想要我也可以发布的CSS,但我认为它不太需要.
非常感谢提前.
编辑：jsFiddle结果
http://jsfiddle.net/hCXhZ/5/embedded/result/
您可能需要将结果部分放大以补偿响应式CSS.我只是将样式表链接起来,因为我感觉很懒,而且找不到文件中的所有部分也无法被诅咒……
jQuery的
$(function(){
var screenWidth = $(window).width();
$("ul.slides li").css("width",screenWidth);
$(window).resize(function() {
var SlideWidth = $("ul.slides li").width();
var screenWidth = $(window).width();
$("ul.slides li").css("width",screenWidth);
});
$('.slider-controls li').click(function(){
var slideToID = $(this).children().attr('rel');
var SlideWidth = $("ul.slides li").width();
var slideTo = (slideToID * SlideWidth) - SlideWidth;
var arrowTo = 85+(240*(slideToID-1));
$('.slider-controls li').removeClass('active');
$(this).addClass('active');
$('ul.slides').animate({"left": -slideTo});
$('div.slider-arrow').animate({"left": arrowTo});
});
});
function slider() {
var SlideWidth = $("ul.slides li").width();
var SlideCount = $("ul.slides li").size();
var TotalWidth = SlideWidth * SlideCount;
var StopPos = TotalWidth - SlideWidth;
var CurPos = $("ul.slides").position().left;
if (CurPos <= -StopPos) {
$("ul.slides").animate({"left": "0"});
}
if (CurPos > -StopPos) {
$("ul.slides").animate({"left": "-="+SlideWidth+"px"});
}
var slideId = (-CurPos + SlideWidth) / SlideWidth;
var fSlideId = slideId + 1;
var arrowTo = 85+(240*(fSlideId-1));
$('.slider-controls li').removeClass('active');
if (fSlideId < 5) {
$('.slider-controls li.slide'+fSlideId+'').addClass('active');
$('div.slider-arrow').animate({"left": arrowTo});
}
if (fSlideId == 5) {
$('.slider-controls li.slide1').addClass('active');
$('div.slider-arrow').animate({"left": 85});
}
};
$(function(){
var SlideWidth = $("ul.slides li").width();
var SlideCount = $("ul.slides li").size();
var TotalWidth = SlideWidth * SlideCount;
var StopPos = TotalWidth - SlideWidth;
var CurPos = $("ul.slides").position().left;
timeout = setInterval('slider()',6000);
$(window).width();
$("ul.slides").css("width",TotalWidth);
$(".controls .leftarrow").click(function() {
var CurPos = $("ul.slides").position().left;
if (CurPos >= 0){
$("ul.slides").animate({"left": "-"+StopPos})
}
if (CurPos < 0){
$("ul.slides").animate({"left": "+="+SlideWidth+"px"})
}
});
$(".controls .rightarrow").click(function() {
var CurPos = $("ul.slides").position().left;
if (CurPos <= -StopPos) {
$("ul.slides").animate({"left": "0"})
}
if (CurPos > -StopPos) {
$("ul.slides").animate({"left": "-=" + SlideWidth + "px"})
}
});
$(".slider-controls").hover(
function () {
clearInterval(timeout);
},function () {
timeout = setInterval('slider()',4000);
}
);
});
HTML
<div id="slider">
<ul class="slides">
<li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/Innovation.jpeg);">
<div class="container_12">
<div class="grid_12">
<h1 class="title">Modern Innovation</h1>
<p> <a href=""></a></p>
</div>
</div>
</li>
<li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/specialist-equipment.jpg);">
<div class="container_12">
<div class="grid_12">
<h1 class="title">Specialist Equipment</h1>
<p>NP Seymour have a range of packhouse and grading equipment
<br /> <a href="http://www.google.com">Click here to view our products</a></p>
</div>
</div>
</li>
<li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/Home-Page-slider-3.jpeg);">
<div class="container_12">
<div class="grid_12">
<h1 class="title">Service and quality</h1>
<p>Purveyors of high quality,extremely useful Agricultural Machinery and accessories.<br /> <a href="http://www.google.com/">Click here to view our products</a></p>
</div>
</div>
</li>
<li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/slide-11.jpg);">
<div class="container_12">
<div class="grid_12">
<h1 class="title">Latest Technology</h1>
<p>We specialise in orchard,vineyard and hop machinery<br /> <a href="http://www.google.com">Click here to view our products</a></p>
</div>
</div>
</li>
</ul>
</div>
<div class="slider-controls">
<ul class="container_12">
<div class="slider-arrow"></div>
<li class="alpha active slide1 grid_3">
<a href="javascript:;" rel="1">Modern Innovation</a>
</li>
<li class="slide2 grid_3">
<a href="javascript:;" rel="2">Specialist Equipment</a>
</li>
<li class="slide3 grid_3">
<a href="javascript:;" rel="3">Service and quality</a>
</li>
<li class=" omega slide4 grid_3">
<a href="javascript:;" rel="4">Latest Technology</a>
</li>
</ul>
</div>
解决方法
使用此处的脚本管理以使其工作：
http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery
虽然这具有无限滚动滑块所需的效果,但我无法弄清楚如何使跳转导航正常工作,这在我看来从网站的美学中消失了很多……但是,无论如何,客户总是对的呃？
$(function() {
//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()',speed);
//grab the width and calculate left value\
var screenWidth = $(window).width();
$("ul.slides li").css("width",screenWidth);
$("ul.slides li").width(screenWidth);
var fullWidth = $('ul.slides li').size() * $('ul.slides li').width();
$('ul.slides').css('width',fullWidth);
var item_width = $('ul.slides li').width();
var left_value = item_width * (-1);
//move the last item before first item,just in case user click prev button
$('ul.slides li:first').before($('ul.slides li:last'));
$('ul.slides li:first').before($('ul.slides li:last'));
//set the default item to the correct position
$('ul.slides').css({'left' : left_value});
//if user clicked on prev button
$('a.controls.left').click(function() {
//get the right position
var left_indent = parseInt($('ul.slides').css('left')) + item_width;
//slide the item
$('ul.slides').animate({'left' : left_indent},1000,function(){
//move the last item and put it as first item
$('ul.slides li:first').before($('ul.slides li:last'));
//set the default item to correct position
$('ul.slides').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('a.controls.right').click(function() {
//get the right position
var left_indent = parseInt($('ul.slides').css('left')) - item_width;
//slide the item
$('ul.slides').animate({'left' : left_indent},function () {
//move the first item and put it as last item
$('ul.slides li:last').after($('ul.slides li:first'));
//set the default item to correct position
$('ul.slides').css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if mouse hover,pause the auto rotation,otherwise rotate it
$('ul.slides').hover(
function() {
clearInterval(run);
},function() {
run = setInterval('rotate()',speed);
}
);
});
//a simple function to click next link
//a timer will call this function,and the rotation will begin :)
function rotate() {
var item_width = $('ul.slides li').width();
var left_value = item_width * (-1);
//get the right position
var left_indent = parseInt($('ul.slides').css('left')) - item_width;
//slide the item
$('ul.slides').animate({'left' : left_indent},function () {
//move the first item and put it as last item
$('ul.slides li:last').after($('ul.slides li:first'));
//set the default item to correct position
$('ul.slides').css({'left' : left_value});
});
}
