YUI旋转木马自定义导航

YUI Carousel custom navigation

本文关键字：导航 自定义 旋转木马 YUI      更新时间：2023-09-26

Javascript代码

YAHOO.util.Event.onDOMReady(function (ev) {
    var carousel = new YAHOO.widget.Carousel("container", {isCircular: true, numVisible:1});
    console.log(carousel.set('navigation', {prev: document.getElementById('prev'), next: document.getElementById('next')}));
    carousel.render();
    carousel.show();
});

HTML

<div id='container'>
    <a href='#' ><span id='prev'> Prev </span></a> 
    <a href='#' ><span id='next'> Next </span></a> 
    <ol>
        <li><img src='history_base_files/200.jpeg' height="300" width="300" /></li>
        <li><img src='history_base_files/280.jpg' height="300" width="300" /></li>
        <li><img src='history_base_files/350.jpg' height="300" width="300" /></li>
        <li><img src='history_base_files/370.jpg' height="300" width="300" /></li>
    </ol>
</div>

控制台在设置转盘的导航属性时输出false。在网上找不到任何好的推荐人。

如何创建yui旋转木马与自定义导航，如锚或跨度？

回答我自己的问题以报告对我有效的解决方案

HTML:

<div id='container'>
        <a id='prev' href="#" class="yui-carousel-button yui-carousel-prev" role="button"><span><strong>Prev</strong></span></a>
        <a id='next' href="#" class="yui-carousel-button yui-carousel-next" role="button"><span><strong>Next</strong></span></a>
        <ol>
            <li><a href='#'><img src='history_base_files/200.jpeg' height="300" width="300" /></a></li>
            <li><img src='history_base_files/280.jpg' height="300" width="300" /></li>
            <li><img src='history_base_files/350.jpg' height="300" width="300" /></li>
            <li><img src='history_base_files/370.jpg' height="300" width="300" /></li>
        </ol>
    </div>

添加类yui转盘按钮，yui转盘prev&yui转盘旁边的自定义按钮元素解决了这个问题。

相关文章：