Question

最近我在我的wordpress中实现了一个滑块，但是我想做一个改变，不知道怎么做，我希望我的滑块不仅可以在onclick上进行转换，而且还可以在onmouseover上进行，有人知道怎么做？看看我的jquery：

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>

<script type="text/javascript">
var theInt = null;
        var $crosslink, $navthumb;
        var curclicked = 0;

        theInterval = function(cur){
            clearInterval(theInt);

            if( typeof cur != 'undefined' )
                curclicked = cur;

            $crosslink.removeClass("active-thumb");
            $navthumb.eq(curclicked).parent().addClass("active-thumb");
                jQuery(".stripNav ul li a").eq(curclicked).trigger('click');

            theInt = setInterval(function() {
                $crosslink.removeClass("active-thumb");
                $navthumb.eq(curclicked).parent().addClass("active-thumb");
                jQuery(".stripNav ul li a").eq(curclicked).trigger('click');
                curclicked++;
                if( 6 == curclicked )
                    curclicked = 0;

            }, 4000);
        };

        jQuery( document ).ready(function($) {

            jQuery("#main-photo-slider").codaSlider();

            $navthumb = $(".nav-thumb");
            $crosslink = $(".cross-link");

            $navthumb
                .click(function() {
                    var $this = $(this);
                    theInterval($this.parent().attr('href').slice(1) - 1);
                    return false;
                });

            theInterval();

});


    </script>

我的css：

<style type="text/css">
.primeirosliderthumb img { border: 1px solid black; margin-right: 5px; }
.slider-wrap    { width: 419px; position: absolute; top: 0px; left: 0px; }          
.stripViewer .panelContainer 
.panel ul                       { text-align: left;  }
.stripViewer                        { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer                { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel         { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav           { display: none; }
#movers-row img {border: 1px solid black; margin-right: 5px;}
#movers-row                     { margin: -43px 0 0 62px; }
#movers-row div                 { width: 20%; float: left; }
#movers-row div a.cross-link                { float: right; }
.photo-meta-data                    { background: url(homepageslider/images/transpBlack.png); padding: 10px; height: 30px; 
margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span                   { font-size: 13px; }
.cross-link                     { display: block; width: 62px; margin-top: -14px; 
                                              position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb                       { background: transparent url(homepageslider/images/icon-uparrowsmallwhite.png) top center no-repeat; }
</style>

下面是我的php：

    <div class="slider-wrap">

        <div id="main-photo-slider" class="csw">

            <div class="panelContainer">

                <!-- esta parte vai dentro do foreach --> 

                <?php $recent = new WP_Query("showposts=6&orderby=date&order=DESC"); while($recent->have_posts()) : $recent->the_post();?>

                <div class="panel" title="Panel 1">
                    <div class="wrapper">
                        <!-- REGULAR IMAGE PANEL -->
                        <?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
                        <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('slider-thumb'); ?></a>

                        <!-- <img src="homepageslider/images/tempphoto-1.jpg" alt="temp" /> -->
                        <?php } ?>
                        <div class="photo-meta-data">
                        <?php if(get_post_meta($post->ID, "maxmag_featured_headline", true)) { ?>

                        <a href="<?php the_permalink() ?>" style="color:#ffffff;font-size:100%;"><?php echo get_post_meta($post->ID, "maxmag_featured_headline", true); ?></a><br />
                            <!-- <span>"Free Tibet" Protest at the Olympic Torch Rally</span> -->

                            <?php } else { ?>

                            <a href="<?php the_permalink() ?>" style="color:#ffffff;font-size:100%;"><?php the_title(); ?></a><br />
                            <!-- <span>"Free Tibet" Protest at the Olympic Torch Rally</span> -->



                            <?php } ?>

                        </div>
                    </div>
                </div>

                <?php endwhile; ?>

                <!-- fim da parte vai dentro do foreach --> 

                <!--deve se ter 6 itens porque os thumbs são de 6 -->

            </div>
        </div>

        <!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
              AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
<?php $cont = 1; ?>
<?php $recent = new WP_Query("showposts=6&orderby=date&order=DESC"); while($recent->have_posts()) : $recent->the_post();

?>

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
        <?php if ( $cont == 1) { ?>

            <div class="primeirosliderthumb" >
                <a href="#<?php echo $cont; ?>" class="cross-link active-thumb"><?php the_post_thumbnail('slider-thumb-small'); ?></a>
            </div>

            <div id="movers-row">
            <?php } else { ?>
            <div><a href="#<?php echo $cont; ?>" class="cross-link"><?php the_post_thumbnail('slider-thumb-small'); ?></a></div>
            <?php } ?>
        <?php } ?>

<?php 
$cont++;

endwhile; ?>

Answer 1

从代码看，$ navthumb上面有一个点击事件。改变它来处理多个事件可能就是一招。

所以让我们尝试更改$ navthumb.click（）事件来处理多个事件......

我改变了：

$navthumb
  .click(function() {
      var $this = $(this);
      theInterval($this.parent().attr('href').slice(1) - 1);
      return false;
  });

为：

$navthumb
  .on("click mouseenter", function() {
      var $this = $(this);
      theInterval($this.parent().attr('href').slice(1) - 1);
      return false;
  });

看看是否有帮助。

JQuery将我的滑块操作从onclick更改为mouseover

1 个答案: