- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我在一个使用 Mootools 的网站上工作,并且在该网站上添加了一个旋转木马,该网站取自此处 - http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin_source.html
问题是轮播在某种程度上不能很好地与 Mootools 配合使用。使用 Mootools 时,它不起作用,当我删除 Mootools 时,它开始工作。当启用 Mootools 时,Firebug 也不会在控制台中显示任何 JS 错误或冲突。
我设置了几个 jsfiddle 来演示这个问题。
HTML
<div class="yui-skin-sam">
<h1 id="my-carousel-label">Expert Health Advice</h1>
<div id="container">
<ol id="carousel">
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/"><img width="125" height="154" alt="Leslie Baumann, M.D." src="http://l.yimg.com/fz/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">Leslie Baumann, M.D.</a></h3>
<h4><a href="http://health.yahoo.com/experts/skintype/12135/skin-treatments-for-brides-to-be/">Skin Treatments for‰</a></h4>
<cite>Posted Thu 5.1.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/skintype/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/"><img width="125" height="154" alt="Deepak Chopra, M.D." src="http://l.yimg.com/fz/ls/he/blogs/carousel/DeepakChopra_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">Deepak Chopra, M.D.</a></h3>
<h4><a href="http://health.yahoo.com/experts/deepak/2689/how-you-think-about-illness-affects-your-recovery/">How You Think About Illness‰</a></h4>
<cite>Posted Thu 5.1.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/deepak/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/"><img width="125" height="154" class="lz" alt="Christine McKinney, M.S., R.D., C.D.E." src="http://l.yimg.com/fz/ls/he/blogs/carousel/ChristineMcKinney_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">Christine McKinney, M.S., R.D., C.D.E.</a></h3>
<h4><a href="http://health.yahoo.com/experts/nutrition/12067/fat-how-much-is-enough-of-a-good-thing/">Fat: How Much Is Enough of a‰</a></h4>
<cite>Posted Thu 5.1.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/nutrition/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/"><img width="125" height="154" class="lz" alt="Dr. Maoshing Ni" src="http://l.yimg.com/fz/ls/he/blogs/carousel/MaoshingNi_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">Dr. Maoshing Ni</a></h3>
<h4><a href="http://health.yahoo.com/experts/drmao/13738/centenarian-tips-for-a-long-life/">Centenarian Tips for a Long‰</a></h4>
<cite>Posted Tue 4.29.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/drmao/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/"><img width="125" height="154" class="lz" alt="Lillie Shockney, R.N., M.A.S." src="http://l.yimg.com/fz/ls/he/blogs/carousel/LillieShockney_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
Lillie Shockney, R.N., M.A.S.</a></h3>
<h4><a href="http://health.yahoo.com/experts/breastcancer/5673/are-you-being-over-or-undertreated/">Are You Being Over- or‰</a></h4>
<cite>Posted Tue 4.29.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/breastcancer/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/depression/bio/david-neubauer/"><img width="125" height="154" class="lz" alt="David Neubauer, M.D." src="http://l.yimg.com/fz/ls/he/blogs/carousel/DavidNeubauer_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">David Neubauer, M.D.</a></h3>
<h4><a href="http://health.yahoo.com/experts/depression/12445/could-a-breast-cancer-treatment-help-bipolar-disorder/">Could a Breast Cancer‰</a></h4>
<cite>Posted Tue 4.29.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/depression/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/capessa/bio/capessa/"><img width="125" height="154" class="lz" alt="Jennifer Tuma-Young" src="http://l.yimg.com/fz/ls/he/blogs/carousel/Capessa_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/capessa/bio/capessa/">Jennifer Tuma-Young</a></h3>
<h4><a href="http://health.yahoo.com/experts/capessa/3473/relieve-stress-with-your-senses/">Relieve Stress With Your‰</a></h4>
<cite>Posted Mon 4.28.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/capessa/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/"><img width="125" height="154" class="lz" alt="Lucy Danziger, SELF Edit" src="http://l.yimg.com/fz/ls/he/blogs/carousel/LucyDanziger_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">Lucy Danziger, SELF Edit</a></h3>
<h4><a href="http://health.yahoo.com/experts/healthieryou/2639/de-stress-in-mere-minutes/">De-Stress in Mere Minutes</a></h4>
<cite>Posted Mon 4.28.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/healthieryou/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/"><img width="125" height="154" class="lz" alt="Simeon Margolis, M.D., Ph.D." src="http://l.yimg.com/fz/ls/he/blogs/carousel/SimeonMargolis_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">Simeon Margolis, M.D., Ph.D.</a></h3>
<h4><a href="http://health.yahoo.com/experts/healthnews/13879/alzheimer-s-and-dementia-will-you-be-affected/">Alzheimer's and Dementia: Will‰</a></h4>
<cite>Posted Mon 4.28.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/healthnews/">View All Posts »</a>
</p>
</li>
<li class="item"> <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/intentblog/bio/intentblog/"><img width="125" height="154" class="lz" alt="Mallika Chopra, IntentBlog" src="http://l.yimg.com/fz/ls/he/blogs/carousel/Intentblog_carousel.png"/></a>
<h3><a href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">Mallika Chopra, IntentBlog</a></h3>
<h4><a href="http://health.yahoo.com/experts/intentblog/2919/treating-a-sore-throat/">Treating a Sore Throat</a></h4>
<cite>Posted Mon 4.28.08</cite>
<p class="all"><a href="http://health.yahoo.com/experts/intentblog/">View All Posts »</a>
</p>
</li>
</ol>
</div>
</div>
Javascript
window.onload=function(){
(function () {
var carousel;
YAHOO.util.Event.onDOMReady(function (ev) {
var carousel = new YAHOO.widget.Carousel("container", {
animation: { speed: 0.5 },
describedby: "my-carousel-label"
});
carousel.render(); // get ready for rendering the widget
carousel.show(); // display the widget
});
})();
}
如有任何帮助,我们将不胜感激。
最佳答案
如上所述,我认为最好的选择是使用基于 Mootools 的 Carousel。
如果那是你想要的方式,我会为此做出贡献:
(使用您的 CSS 文件和布局)
CSS(额外的,除了你的文件):
ol {
list-style: none;
overflow-y: hidden;
overflow-x: visible;
position: relative;
padding:0px;
height:320px;
width:10000px;
}
ol#carousel li.item {
float: left;
width:471px;
}
#container {
height:400px;
width:471px;
}
Mootools
var items = document.getElements('li.item');
var carousel = $('carousel');
/**************************************
Caroussel functions
**************************************/
var li_index = 0;
function gotoSlide(ind) {
li_index = ind;
var pos = items[ind].getPosition().x - carousel.getPosition().x;
li_thumbs.each(function (e, i) {
e.removeClass('yui-carousel-nav-page-selected');
if (ind == i) e.addClass('yui-carousel-nav-page-selected');
});
carousel.morph({
'margin-left': -pos
});
};
/**************************************
Create rest of markup
**************************************/
var container = document.id('container');
container.addClass('yui-carousel-visible yui-carousel-horizontal yui-carousel');
var nav = new Element('div', {
'class': 'yui-carousel-nav'
});
var li = new Element('li');
var ul = new Element('ul');
var span0 = new Element('span', {
'class': 'yui-carousel-button'
});
var span1 = new Element('span', {
'class': 'yui-carousel-button'
});
var btn = new Element('button');
var div_content = new Element('div', {
'class': 'yui-carousel-content'
});
btn.clone().set('id', 'yui-gen10').inject(span0);
span0.addClass('yui-carousel-first-button').inject(nav);
btn.clone().set('id', 'yui-gen11').inject(span1);
span1.addClass('yui-carousel-next-button').inject(nav);
items.each(function (ele, ind) {
li.clone().set('id', 'nav_button_' + ind).addEvent('click', function () {
li_index = ind;
gotoSlide(ind);
}).inject(ul);
});
ul.getElement('li').addClass('yui-carousel-nav-page-selected');
ul.inject(nav);
div_content.inject(container);
nav.inject(container, 'top');
div_content.wraps(carousel);
document.getElements('.yui-carousel-button button').addEvent('click', function () {
var ind = (this.id).split('yui-gen1')[1] == 0 ? li_index - 1 : li_index + 1;
if (ind < 0 || ind > items.length - 1) return false;
gotoSlide(ind);
});
var li_thumbs = $$('.yui-carousel-nav ul li');
关于javascript - Mootools 和 YUI 轮播问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19180550/
我在我的应用程序中使用开源 iCarousel 来实现轮播控件。我使用的轮播类型是 iCarouselTypeRotary 并且图像在这种类型中线性排列。但是,我需要图像像所附图像中的旋转木马一样带来
有人看过像这样的 jQuery 3D 轮播教程吗? http://web.enavu.com/demos/3dcarouselwip/ 没有给出来源,但想知道是否有人有关于如何连续圈出 DIV 并调整
我正在开发一种使用相机自动拍摄照片的软件。我希望用户能够设置照片间隔。我希望它看起来和工作起来像某种轮播。 它应该是这样的: 当我滑动(或用鼠标拖动)时,它应该沿给定方向移动: 所选项目应始终位于中间
抱歉问了个愚蠢的问题。我正在寻找带有按钮的旋转木马。我在 Bootply 上找到了这个模板,它完全符合我的要求。我在开发方面还很陌生。 也许有人可以向我解释如何摆脱侧面滚动效果。我知道我必须向 Jav
我正在寻找一个可以处理表单元素的 jQuery 轮播风格插件。 这是我需要做的。 我有三个表单元素:两个常规文本框和一个文本区域。还有两个按钮,上一个和下一个。 单击下一步按钮时,文本框/文本区域会切
我想构建一个包含两个图像轮播的网页,并且我希望能够将图像从一个轮播拖动到另一个。 我已经有了与 jCarouselLite 一起使用的图像轮播:它使用两个 UL 元素来指定轮播的图像。这工作得很好。
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我有这段代码可以从数据库中获取轮播图片或视频 $stmt = $con->prepare("SELECT * FROM `Main`"); $stmt->execut
我需要做这个 slider ,我找到了一些代码并尝试了,但没有一个完全是 LIKE THIS .bloco03 img {
我的任务是制作 3 张图片的轮播/幻灯片,只能在移动设备上使用。在桌面上,这些图像将显示在 3 列中。有没有一种方法可以自动转换,而无需我创建两个不同的模块并根据屏幕尺寸隐藏/显示一个? 最佳答案 你
我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ,我给了元素框阴影。但我坚持制作不同位置元素的效果,例如 3d 或任何名称。 这是我想做的 http://www.awesomescr
我已经盯着这段相同的代码看了大约 4 个小时,并尝试观看一些不同的教程。问题是 slider 加载,有 3 张幻灯片的空间,但它只显示第一张幻灯片。 所有图像加载良好(在浏览器中验证),但轮播不会更改
我的 carouse/slider 有问题,我已经做到了,上一张和下一张图片每边各占 25%,中央图片占 50% 宽度。问题是我能够更改左右图像的背景,但我似乎无法将相同的颜色应用于中间图像。我已经尝
我想一次放 5 张图片作为页面的背景,即一张图片会显示一小段时间(比如每张一秒钟),然后重复它们。 我想知道有没有办法用 CSS 或 JS 来做到这一点? 预先感谢您的帮助! 最佳答案 这也许就是您正
我正在寻找一个支持触摸、可拖动、响应式 jQuery 滚动条/幻灯片/轮播/ slider ,用于显示水平可滚动项目列表(例如, eshop、最近将照片添加到数据库等)。 它看起来类似于苹果应用程序商
我想要夹层画廊的 Bootstrap 轮播。基本上;我正在拉入所有图像,并且我想要单行三张图像轮播。这是我非常讨厌的一段工作代码;我真的很想让它适用于无限数量的图像。 {% if page.d
大家好,我有这段代码,我一直在为我的网站编写代码。我正在尝试实现一个轮播功能,其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子
我正在构建一个简单的轮播,一旦用户水平滚动,事件点就会改变事件状态。但是,当我滚动时,jQuery 左侧位置返回值没有改变: li_left = li.position().left; // this
我正在尝试将文本放在轮播 slider 中的图像下方,但现在文本出现在图像上,而不是下方。 它看起来像这样: 但我希望它看起来像这样: 这是我的代码: final CarouselSlider aut
我在使用 boostrap carousel 时遇到 CSS 问题 我只是想让它更高,我已经尝试了几个 css 但没有任何效果。代码是在这个 jsFiddle 中,http://jsfiddle.ne
我是一名优秀的程序员,十分优秀!