0

关于这个主题有类似的问题，但不一样。我有一个滚动 jQuery 功能，它使用选项卡进行选择并且是自动化的。我不能轻易改变这个布局，因为它是动态的，并且基于选定数组中有多少项在 PHP 中传递。标记代码看起来像这样......（见最后的 PHP）

<div id="tabs" class="clients" style="display:none;">
 <a class="" href="#">1</a>
 <a class="" href="#">2</a>
 <a class="" href="#">3</a>
 <a class="" href="#">4</a>
 <a class="activeSlide" href="#">5</a>
</div>

当它滚动或选择选项卡时，它成为 activeSlide 类。我计划在某些客户端上使用 display:none （在 CSS 中）来隐藏选项卡，并希望在我的前进/后退中包含这个箭头布局，并绑定某种类型的 JavaScript...

<div id="slider-controls">
  <a href="#" id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a>      <span><img src="_img/blank.gif" width="1" height="1" /></span>
  <a href="#" id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a>
</div>

关于使用现有 jQuery 更容易修复的任何见解，我应该寻找什么以及是否可以简单地添加 JavaScript 以使用新的前进/后退选项卡覆盖现有代码。

现在这里是我的 PHP 代码，此时可以查看所有内容的来源，您可以看到我也有一个暂停按钮（不那么重要）和一个不在所有项目中的客户端案例研究，所以一个 if/别的。比让它工作更重要的是，我想学习一种更好的方法来解决这个问题，以及它如何为那些有更多时间的人工作。

<?php if ($num_projs > 0){ ?>
        <div id="slider">
            <div id="photos">
                <!-- dump all photos here, then manipulate them via tabs with jQuery -->
                <?php 
                foreach($projects as $project){
                    if($project['project_media_use'] == 'video' and $project['project_video'] != ''){
                ?>
                <div id="<?php print stripslashes($project['project_name']);?>" title="<?php print stripslashes($project['project_desc']);?>" class="video"><iframe src="http://player.vimeo.com/video/<?php print $project['project_video'];?>?title=0&amp;byline=0&amp;portrait=0" width="606" height="348" marginheight="0" marginwidth="0" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></div>
                <?php }else{ ?>
                <div id="<?php print stripslashes($project['project_name']);?>" title="<?php print stripslashes($project['project_desc']);?>" style="background-image: url('_img/_cms_uploads/_projects/<?php print $project['project_image'];?>')"></div>
                <?php } } ?>

            </div>
            <div id="slider-bottom"> <!-- added display:none; to hide tabs - Shane -->
                <div style="display:none;" id="tabs" class="clients"></div> <!-- tabs are created automatically based on number of divs within "photos" div -->
                <?php if($clientCaseStudy != ''){?>
                    <div id="links">
                <!-- shane -->
                    <a><img src="_img/_sliders/pause.gif" id="pause" width="20" height="17"/></a><span><img src="_img/blank.gif" width="1" height="1" /></span>
                    <a id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a><span><img src="_img/blank.gif" width="1" height="1" /></span><a id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a><br />
                        <a style="text-align: left;" href="/<?php print $clientCaseStudy + " ";?>" rel="casestudy">CASE STUDY &gt;</a> <div style="clear:left"></div>
                 <!-- shane -->

                </div><?php } else{?>
                    <div id="links"><a><img src="_img/_sliders/pause.gif" id="pause" width="20" height="17"/></a><span><img src="_img/blank.gif" width="1" height="1" /></span>
                    <a id="prev"><img src="_img/_sliders/prev.gif" width="41" height="17" /></a><span><img src="_img/blank.gif" width="1" height="1" /></span><a id="next"><img src="_img/_sliders/next.gif" width="41" height="17" /></a>
                    </div>
                <?php } ?>
            </div>
        </div>
        <?php } ?>

如果有帮助，该网站正在使用 Twitter Bootstrap。

4

1 回答 1

0

我最终弄清楚了这一点，并认为我会分享以防其他人遇到同样的情况。它涉及操作一个 JavaScript 文件，添加最后两行代码......

$(document).ready(function() {
$('#photos').cycle({ 
    fx:     'turnDown', 
    speed:  'slow', 
    timeout: 9000, 
    pager:  '#tabs',
    before:  onBefore, 
    after:   onAfter,
    next:   '#next', //added shane
    prev:   '#prev'  //added shane
});

然后将这种性质的东西添加到另一个文件中......

<div class="nav">
                <a id="prev" href="#">Prev</a>
                <a id="next" href="#">Next</a>
            </div>

...让我能够导航或使用标签。这个网站http://jquery.malsup.com/cycle/int2.html在弄清楚所有这些方面非常有帮助，并且看起来是 jQuery Cycle 插件的一部分。

于 2012-06-08T05:49:04.050 回答