连续动画幻灯片向左使用jQuery
Continuously Animate Slides to the Left Using jQuery
大家好，
我一直在尝试在这里和各种谷歌搜索中找到的各种方法(没有成功)。我正试图重新创建这个微软页面上发现的"顶级产品查看器"功能(查看位于页面顶部的旋转器下方)。我在CSS和布局上做得很好。然而，我有严重的问题让动画工作。
我想让幻灯片动画总是向左。
任何帮助都是感激的。我挖空了animateLeftOnly函数，因为我正在寻找一个新的选项。
更新:
下面的帮助非常有用。但范围的变化让我选择了另一条路。以下是最终的完整版本:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
/* This styling is assumed to come-in from a master set of CSS files */
body, select { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; }
h3 { font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 11pt; font-weight: normal;}
h4 { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; font-size: 9pt; font-weight: normal;}
</style>
<style type="text/css">
/* This is the styling for the control (itself) */
.metroPivot { border: 1px solid #D3D3D3; height: 250px; width: 930px; overflow: hidden; }
.metroPivot .header { border-bottom: 1px solid; padding: 0px 0px 0px 15px; background-color: #FFFFFF; border-bottom-color: #D3D3D3; color: #4F4F4F; }
.metroPivot .header h3 { font-size: 162.5%; margin-bottom: 10px; }
.metroPivot .content-categories { width: auto; }
.metroPivot .content-categories div { float: left; }
.metroPivot .content-categories div.current
{
background-image: url(http://i.microsoft.com/global/en-us/homepage/PublishingImages/Sprites/white-carousel.png);
background-position: -55px -61px;
overflow: hidden;
background-repeat: no-repeat;
}
.metroPivot .content-categories div h4 { width: 115px; float: left; text-align: center; font-size: 81.5%; border-right: 1px solid #4F4F4F; }
.metroPivot .content-categories div h4 a { padding-top: 10px; color: #0060A6; cursor: pointer; }
.metroPivot .content-categories div.last h4 { border-right: 0px; }
.metroPivot .content-categories div.current h4 a { color: #4F4F4F; cursor: default; }
.metroPivot .content-viewer { width: 20000px; clear: both; }
.metroPivot .content-viewer .master-slide { float: left; height: 123px; width: 928px; line-height: 123px; }
.metroPivot .content-viewer .master-slide .html-template { border-right: 1px solid #D3D3D3; float: left; height: 110px; width: 288px; padding: 0 10px; }
.metroPivot .content-viewer .master-slide .last { border-right: 0px; }
.metroPivot .content-listing { display: none; }
/* DELETE LATER - maybe
.metroPivot .content-listing .html-template .wrapper { width: 100%; }
.metroPivot .content-listing .html-template .wrapper a.image { float: left; text-decoration: none; padding-right: 10px; }
.metroPivot .content-listing .html-template .wrapper .content { float: left; width: 215px; }
.metroPivot .content-listing .html-template .wrapper .content a.title { display: block; text-decoration: none; }
.metroPivot .content-listing .image-template .wrapper { width: 100%; }
.metroPivot .content-listing .image-template .wrapper a { float:left; text-decoration: none; }
*/
</style>
<script type="text/javascript">
var metroPivot = (function ($) {
var publicInstances = {};
publicInstances.controller = controller;
function controller(clientId, options) {
var defaults =
{
templateType: 'html-template',
behavior: 'continuous-left'
};
this.CSSCLASS_CURRENT = 'current';
this.CSSCLASS_LAST = 'last';
var self = this;
this.clientId = clientId;
this.context = $('#' + self.clientId);
this.header = $('.header', self.context);
this.category = $('.content-categories', self.context);
this.categories = self.category.children();
this.viewer = $('.content-viewer', self.context);
this.viewerItems = self.viewer.children();
this.list = $('.content-listing', self.context);
this.listItems = self.list.children();
this.current = undefined;
this.previous = undefined;
this.isAnimating = false;
this.initialize = function () {
if (self.categories.length >= 1)
self.current = $('.' + self.CSSCLASS_CURRENT, self.category);
if (self.categories.length <= 1)
return;
if (options != undefined)
if (options.length > 0)
defaults = $.extend(defaults, options);
self.populateMaster(0, 0);
self.categories.each(function () {
$(this).click(self.categoryClicked);
});
self.listItems.each(function () {
$(this).data('index', $(this).index());
});
};
this.categoryClicked = function () {
var next = $(this);
if (next.hasClass(self.CSSCLASS_CURRENT))
return;
if (self.isAnimating)
return;
self.isAnimating = true;
var previous = self.current;
next.toggleClass(self.CSSCLASS_CURRENT);
previous.toggleClass(self.CSSCLASS_CURRENT);
self.current = next;
self.previous = previous;
self.move();
};
this.populateMaster = function (masterIndex, categoryIndex) {
// TODO: the selectors need to work directly off of this objects properties.
masterIndex += 1;
var master = $(".master-slide:nth-child(" + masterIndex + ")", self.viewer);
var clones = $("[data-index=" + categoryIndex + "]", self.list).clone();
master.empty();
clones.css('display', 'block').appendTo(master);
};
this.move = function () {
var categoryIndex = self.current.index();
self.populateMaster(1, categoryIndex);
if(defaults.behavior == 'continuous-left')
self.animateContinuousLeft();
};
this.animateContinuousLeft = function () {
// TODO: the selectors need to work directly off of this objects properties.
var currentSlide = $('div.content-viewer div:first');
if (currentSlide.length > 0) {
currentSlide.clone().appendTo('div.content-viewer');
currentSlide.animate({ width: 'hide' }, function () {
$(this).remove();
self.isAnimating = false;
});
}
};
self.initialize();
};
return publicInstances;
})(jQuery);
var instance = undefined;
$(document).ready(function () {
instance = new metroPivot.controller('myControl');
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="myControl" class="metroPivot">
<div class="header">
<h3>
Top Products
</h3>
</div>
<div class="content-categories">
<div class="current">
<h4>
<a>Most Popular</a>
</h4>
</div>
<div>
<h4>
<a>Windows</a>
</h4>
</div>
<div>
<h4>
<a>Office</a>
</h4>
</div>
<div>
<h4>
<a>Xbox</a>
</h4>
</div>
<div>
<h4>
<a>Windows Phone</a>
</h4>
</div>
<div>
<h4>
<a>Windows Live</a>
</h4>
</div>
<div>
<h4>
<a>Bing</a>
</h4>
</div>
<div class="last">
<h4>
<a>Bada-Bing!</a>
</h4>
</div>
</div>
<div class="content-viewer">
<div class="master-slide">
</div>
<div class="master-slide">
</div>
</div>
<div class="content-listing">
<div data-index="0" class="html-template">
Most Popular
</div>
<div data-index="0" class="html-template">
Most Popular
</div>
<div data-index="0" class="html-template last">
Most Popular
</div>
<div data-index="1" class="html-template">
Windows
</div>
<div data-index="1" class="html-template">
Windows
</div>
<div data-index="1" class="html-template last">
Windows
</div>
<div data-index="2" class="html-template">
Office
</div>
<div data-index="2" class="html-template">
Office
</div>
<div data-index="2" class="html-template last">
Office
</div>
<div data-index="3" class="html-template">
Xbox
</div>
<div data-index="3" class="html-template">
Xbox
</div>
<div data-index="3" class="html-template last">
Xbox
</div>
<div data-index="4" class="html-template">
Windows Phone
</div>
<div data-index="4" class="html-template">
Windows Phone
</div>
<div data-index="4" class="html-template last">
Windows Phone
</div>
<div data-index="5" class="html-template">
Windows Live
</div>
<div data-index="5" class="html-template">
Windows Live
</div>
<div data-index="5" class="html-template last">
Windows Live
</div>
<div data-index="6" class="html-template">
Bing
</div>
<div data-index="6" class="html-template">
Bing
</div>
<div data-index="6" class="html-template last">
Bing
</div>
<div data-index="7" class="html-template">
Bada-Bing!
</div>
<div data-index="7" class="html-template">
Bada-Bing!
</div>
<div data-index="7" class="html-template last">
Bada-Bing!
</div>
</div>
</div>
</asp:Content>
更新:
下面的所有内容都是原始问题的一部分。使用上面的代码作为最终解决方案。
这是下面代码的JS-FIDDLE
代码:
<script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
/* This styling is assumed to come-in from a master set of CSS files */
body, select { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; }
h3 { font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 11pt; font-weight: normal;}
h4 { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; font-size: 9pt; font-weight: normal;}
</style>
<style type="text/css">
/* This is the styling for the control (itself) */
.slideScroll-horizontal { border: 1px solid #D3D3D3; height: 270px; width: 960px; overflow: hidden; }
.slideScroll-horizontal .header { border-bottom: 1px solid; padding: 0px 0px 0px 15px; background-color: #FFFFFF; border-bottom-color: #D3D3D3; color: #4F4F4F; }
.slideScroll-horizontal .header h3 { font-size: 162.5%; margin-bottom: 10px; }
.slideScroll-horizontal .content-categories { width: auto; }
.slideScroll-horizontal .content-categories div { float: left; }
.slideScroll-horizontal .content-categories div.current
{
background-image: url(http://i.microsoft.com/global/en-us/homepage/PublishingImages/Sprites/white-carousel.png);
background-position: -55px -61px;
overflow: hidden;
background-repeat: no-repeat;
}
.slideScroll-horizontal .content-categories div h4 { width: 118px; float: left; text-align: center; font-size: 81.5%; border-right: 1px solid #4F4F4F; }
.slideScroll-horizontal .content-categories div h4 a { padding-top: 10px; color: #0060A6; cursor: pointer; }
.slideScroll-horizontal .content-categories div.last h4 { border-right: 0px; }
.slideScroll-horizontal .content-categories div.current h4 a { color: #4F4F4F; cursor: default; }
.slideScroll-horizontal .content-listing { width: 20000px; clear: both; padding: 0 10px; }
.slideScroll-horizontal .content-listing .html-template { border-right: 1px solid #D3D3D3; float: left; height: 145px; width: 300px; padding: 0 10px; }
/* DELETE LATER - maybe */
.slideScroll-horizontal .content-listing .html-template { text-align: center; line-height: 145px; }
</style>
<script type="text/javascript">
var slideScroll = (function ($) {
var publicInstances = {};
publicInstances.controller = controller;
function controller(clientId, options) {
var defaults = {};
this.CSSCLASS_CURRENT = 'current';
this.CSSCLASS_LAST = 'last';
var self = this;
this.clientId = clientId;
this.context = $('#' + self.clientId);
this.header = $('.header', self.context);
this.category = $('.content-categories', self.context);
this.categories = self.category.children();
this.list = $('.content-listing:first', self.context);
this.listItems = self.list.children();
this.current = undefined;
this.previous = undefined;
this.initialize = function () {
if (self.categories.length >= 1)
self.current = $('.' + self.CSSCLASS_CURRENT, self.category);
if (self.categories.length <= 1)
return;
if (options != undefined)
defaults = $.extend(defaults, options);
self.categories.each(function () {
$(this).click(self.categoryClicked);
});
self.listItems.each(function () {
$(this).data('index', $(this).index());
});
};
this.categoryClicked = function () {
var next = $(this);
if (next.hasClass(self.CSSCLASS_CURRENT))
return;
var previous = self.current;
next.toggleClass(self.CSSCLASS_CURRENT);
previous.toggleClass(self.CSSCLASS_CURRENT);
self.current = next;
self.previous = previous;
if (self.categories.length <= 3)
return;
// TODO: check if animation even needs to happen
self.move();
};
this.move = function () {
self.animateLeftOnly();
};
this.animateLeftOnly = function () {
// Any help here is appreciated.
};
self.initialize();
};
return publicInstances;
})(jQuery);
var instance = undefined;
$(document).ready(function () {
instance = new slideScroll.controller('myControl');
});
</script>
<div id="myControl" class="slideScroll-horizontal">
<div class="header">
<h3>
Top Products
</h3>
</div>
<div class="content-categories">
<div class="current">
<h4>
<a>Most Popular</a>
</h4>
</div>
<div>
<h4>
<a>Windows</a>
</h4>
</div>
<div>
<h4>
<a>Office</a>
</h4>
</div>
<div>
<h4>
<a>Xbox</a>
</h4>
</div>
<div>
<h4>
<a>Windows Phone</a>
</h4>
</div>
<div>
<h4>
<a>Windows Live</a>
</h4>
</div>
<div>
<h4>
<a>Bing</a>
</h4>
</div>
<div class="last">
<h4>
<a>Bada-Bing!</a>
</h4>
</div>
</div>
<div class="content-listing">
<div data-index="0" class="html-template">
one
</div>
<div data-index="1" class="html-template">
two
</div>
<div data-index="2" class="html-template">
three
</div>
<div data-index="3" class="html-template">
four
</div>
<div data-index="4" class="html-template">
five
</div>
<div data-index="5" class="html-template">
six
</div>
<div data-index="6" class="html-template">
seven
</div>
<div data-index="7" class="html-template">
eight
</div>
</div>
</div>
以前的(可悲的)尝试看起来像:
this.animateLeftOnly = function () {
var categoryIndex = self.current.index();
var targetSlide = $("[data-index=" + categoryIndex + "]", self.list);
var targetSlideIndex = targetSlide.index();
var currentSlide = undefined;
for (var i = 0; i < targetSlideIndex; i++) {
currentSlide = $('div.content-listing div:first');
currentSlide.animate({ width: 'hide' }, function () {
$(this).insertAfter('div.content-listing div:last', self.listItems);
$(this).removeAttr('style');
});
}
};
我被叫去开会，所以我不能完全回答，但是你想做的很简单。你想克隆第一个子元素，附加到末尾，向左滑动，移除第一个子元素。这就形成了一个无限循环。我已经说过很多次了。
这里有一些东西可以让你开始…
<div class="content-categories">
<div id="slider">
<div class="current">
<h4>
<a>Most Popular</a>
</h4>
</div>
<div>
<h4>
<a>Another</a>
</h4>
</div>
<div>
<h4>
<a>last one</a>
</h4>
</div>
</div>
</div>
你的CSS应该是这样的
.content-categories{
width:300px;
height:300px;
position:relative;
overflow:hidden;
}
.content-categories div{
float:left;
width:300px;
height:300px;
}
#slider{
width:900px;
position:absolute;
left:0;
}
点击动作(假设你有一个图像或箭头或id为left的东西)
$('#left').click(function(){
$('#slider').animate({left: '-300px'}, 1000, function(){
$('#slider:first-child').clone().appendTo('#slider');
$('#slider:first-child').remove();
$('#slider').css('left', '0px');
});
});
所以你克隆第一个子元素，把它扔到滑块容器的末尾，然后删除克隆的元素，并把左边的位置返回到零。应该是无缝的……我得走了。希望能有所帮助
相关文章：
- 剑道网格jQuery动画(）问题
- jquery动画可以通过编程链接吗
- JQuery动画延长容器不起作用
- 如何正确编程jQuery动画与平滑(导航栏）
- jQuery动画-边框宽度和颜色
- 如何抽象JQuery动画方法
- jQuery动画标题滚动
- JQuery - 为什么 JQuery 动画是同时进行的
- 如何用jquery动画改变背景颜色，就像一个过渡
- 正在等待jQuery动画完成
- 如何优化jquery动画代码
- jQuery动画的持续时间就像一个延迟
- 创建一个类似Jquery动画的Flipboard弹出窗口
- 应用jQuery动画时出现意外的抖动效果
- 如何设置'auto'JQuery动画中的高度
- jQuery动画缩放需要我点击主体
- 如何将jquery动画应用于单个项目
- 如何简化jquery动画函数代码
- 使用 jquery 动画幻灯片使用角度中继器切换
- Jquery动画和when函数
