Question

所以我对jQuery有点新鲜 - 我理解基础知识，但我的掌握程度很低。

我基本上有两行三个col-md-4 bootstrap div，每个div都链接到一个图像。

我写的jQuery绝对是如此臃肿，但我不确定如何更好地做到这一点。我调查了toggleclass，切换，悬停等等，但没有达到我想要的效果。

我写的方式在六个div中的一个上有一个活动的类，相应的图像是＆＃34;显示＆＃34;。我基本上只是添加或删除要显示的类：none或display：block基于正在被鼠标覆盖的内容，直到另一个div悬停在上面。

这是代码，基本上重复了6次。

jQuery('.seoblock').mouseover(function() {
        jQuery('.seoimage').addClass('todisplay');
        jQuery('.brandingimage').removeClass('todisplay');
        jQuery('.mobileimage').removeClass('todisplay');
        jQuery('.optimizationimage').removeClass('todisplay');
        jQuery('.supportimage').removeClass('todisplay');
        jQuery('.commerceimage').removeClass('todisplay');
        jQuery('.seoblock').addClass('todisplayblock');
        jQuery('.brandingblock').removeClass('todisplayblock');
        jQuery('.mobileblock').removeClass('todisplayblock');
        jQuery('.optimizationblock').removeClass('todisplayblock');
        jQuery('.supportblock').removeClass('todisplayblock');
        jQuery('.commerceblock').removeClass('todisplayblock');
});

所有图像都在一行中，最初未显示。我使用addClass显示第一个图像。

你们能指出我正确的概念方向吗？我试着用＃34;这个＆＃34;来实现它。命令，但由于该类没有被添加到它所盘旋的div中，我无法弄清楚如何实现这种效果。

或许这段代码可以使用？唯一的问题是我想让它在图像之间淡入淡出，这是它现在唯一没有做的事情。

这是一张照片。 click

这是fiddle。

非常感谢！

Answer 1

您可以尝试类似

的内容

<!-- Add a class images -->
<div class="col-lg-12 images">
    <img src="http://www.clker.com/cliparts/N/y/j/v/U/T/green-a-md.png" class="img-responsive supportimage displaynone" />
    <img src="https://www.havefunteaching.com/wp-content/uploads/2013/06/letter-a.png" class="img-responsive seoimage displaynone" />
    <img src="http://www.runlounge.com/wp-content/uploads/2014/08/A.jpg" class="img-responsive brandingimage displaynone" />
    <img src="http://3.bp.blogspot.com/-3aPQIa6qALA/TZXW_YdmWTI/AAAAAAAAX7E/RNAMMoj05fs/s400/A.jpg" class="img-responsive mobileimage displaynone" />
    <img src="http://www.askingmatters.com/wp-content/uploads/2012/07/1242257617140579084NYCS-bull-trans-A.svg_.med_.png" class="img-responsive optimizationimage displaynone" />
    <img src="http://englishschooljapan.com/wp-content/uploads/2013/04/a_clipart.jpg" class="img-responsive commerceimage displaynone" />
</div>

然后

<!-- Add a class `block-trigger` and attribute `data-img`(this will have the class for the image to be displayed)-->
<div class="col-lg-4 brandingblock hoverwhite hoveractive block-trigger" data-img=".brandingimage">
    ...
</div>

然后

jQuery(function($) {
    $('.brandingimage').addClass('todisplay');
    var $imgs = $('.images img');
    $('.block-trigger').mouseover(function() {
        var $img = $($(this).data('img')).addClass('todisplay');
        $imgs.not($img).removeClass('todisplay');
    });
});

演示：Fiddle

Answer 2

选择的答案很棒，Arun是jQuery的摇滚明星，我不是。但是，这个我用来交换来自youtube和vimeo的视频的脚本我修改了图像，它使用点击触摸设备和非触摸鼠标悬停。将鼠标悬停在触摸设备上是不可靠的，因为手指没有悬停，因此不同的设备表现不同。在Windows上，您必须添加aria-haspopup =“true”。

我希望我知道如何让功能更好，所以我不必重复，但不是太糟糕了。您不需要加载一个图像，即默认图像，然后将相对URL放在data-src中。真的很简单，IM0。触摸检测适用于IOS，android和IE mobile。

演示：http://jsbin.com/zaleq/1/

编辑/查看代码：http://jsbin.com/zaleq/1/edit

/* ====== SUPPORTS TOUCH OR NOT ====== */
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports=(function(){var d=document.documentElement,c="ontouchstart" in window||navigator.msMaxTouchPoints;if(c){d.className+=" touch";return{touch:true}}else{d.className+=" no-touch";return{touch:false}}})();

/* ====== PRELOAD IMAGES ====== */
// http://css-tricks.com/snippets/jquery/image-preloader/
$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages(
  "http://lorempixel.com/200/200/food/",
  "http://lorempixel.com/200/200/sports/",     
  "http://lorempixel.com/200/200/city/"
);

/* ====== HIDE SHOW IMAGES ON CLICK FOR TOUCH DEVICES ON HOVER FOR NON-TOUCH ====== */
 $(window).load(function() {
    if ($('html').hasClass('no-touch')) {
        $('.image-toggle').bind('mouseover', function(z) {
            z.preventDefault();
            var URL = $(this).attr('data-src');
            var htm = '<img src="' + URL + '" class="img-responsive fademe">';
            $('.image-space').html(htm);
            $('img.fademe').fadeIn(1000).css('display', 'block');
            $(this).addClass('active').siblings('.active').removeClass('active');
        });
    } else {
        $('.image-toggle').bind('click', function(z) {
            z.preventDefault();
            var URL = $(this).attr('data-src');
            var htm = '<img src="' + URL + '" class="img-responsive fademe">';
            $('.image-space').html(htm);
            $('img.fademe').fadeIn(1000).css('display', 'block');
            $(this).addClass('active').siblings('.active').removeClass('active');
            //return false; -- if using an <a href=...
        });
    }
});

<强> CSS：

.image-toggle.active {background:red;color:#fff}

.image-space {margin:3% 0;padding:10px;background:#000}

.image-toggle {padding-top:20px;padding-bottom:20px;;cursor:pointer}

.fademe {display:none;}

.image-space img {margin:0 auto;}

常规HTML结构：

  <div class="container">
     <div class="image-space">
        <img src="http://lorempixel.com/200/200/food/" class="img-responsive">
     </div>
     <div class="row">
        <div class="col-sm-4 image-toggle active" data-src="http://lorempixel.com/200/200/food/">
           <p>Image One</p>
        </div>
        <div class="col-sm-4 image-toggle" data-src="http://lorempixel.com/200/200/sports/">
           <p>Image Two</p>
        </div>
        <div class="col-sm-4 image-toggle " data-src="http://lorempixel.com/200/200/city/">
           <p>Image 3</p>
        </div>
     </div>
     <!-- .row -->
  </div>
  <!-- .container -->

jQuery从6“切换”Div切换主图像

2 个答案:

演示：http://jsbin.com/zaleq/1/