我正在处理一个使用了Mootools的网站,其中添加了一个轮播组件,该组件取自此处 - http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin_source.html
问题在于,轮播组件与Mootools有些不兼容。使用Mootools时,它不起作用,而当我删除Mootools时,它开始工作。当启用Mootools时,Firebug也没有显示任何JS错误或控制台冲突。
我设置了几个jsfiddle来演示这个问题。
- http://jsfiddle.net/jnED8/1/(使用Mootools-不起作用)
- http://jsfiddle.net/jnED8/(不使用Mootools-正常工作)
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
});
})();
}
非常感谢您的帮助。