图像轮播中的双“活动”类
Posted
技术标签:
【中文标题】图像轮播中的双“活动”类【英文标题】:Double "active" class in image carousel 【发布时间】:2017-05-24 18:41:13 【问题描述】:图片轮播的工作原理如下:
-
此图像轮播由两部分组成:主图像区域和缩略图区域(id = 横幅鼠标悬停区域)。
banner-mouseover-area 由主图像的缩略图组成,只有当用户将鼠标悬停在主图像区域上时才会出现。
当用户将鼠标悬停在特定缩略图上时,主图像区域的“活动”图像将更改为鼠标悬停图像。
zoom_image (JS) 函数用于识别鼠标悬停缩略图图像的id,从而将主图像设置为“活动”。
但是,有时在将鼠标悬停在缩略图上之后,图像轮播似乎会同时发生 2 个“活动”类。因此,它在原始图像的正下方创建了第二个图像轮播。但是一旦原图轮播自动滑到队列中的下一张图片,第二张图片轮播就会自动消失。
我应该如何解决这个问题?
提前致谢。
<div id='carouselCustom' class='carousel slide' data-ride='carousel'>
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<?php $bannerCnt=1; $bannerCnt2=0; foreach($images as $image) ?>
<div id="<?php echo 'slide_'.$bannerCnt2; ?>" class="<?php if($bannerCnt == 1) echo 'active'; ?> item">
<a id="imagezoom" href="<?php echo $image['url']; ?>">
<img id="zoomImage" class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$image['banner_path']; ?>" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" onmouseover="bannerPreview()" onmouseout="bannerOffPreview()"/>
</a>
</div>
<?php $bannerCnt++; $bannerCnt2++; ?>
<div id='banner-mouseover-area' style="position: absolute;bottom: 0px; display: none;">
<!-- Indicators -->
<ol class='carousel-indicators mCustomScrollbar'>
<?php $thumbnailCnt=0; foreach($images as $imageThumb) ?>
<li data-transition="flip" data-target="#carouselCustom" data-change-to="<?php echo $thumbnailCnt; ?>" class="<?php if($thumbnailCnt == 0) echo 'active'; ?>">
<a onmouseover='return zoom_image($(this));' rel="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path'].'_&'.$thumbnailCnt; ?>" href="<?php echo $imageThumb['url']; ?>">
<img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" onmouseover="bannerPreview()" />
</a>
</li>
<?php $thumbnailCnt++; ?>
</ol>
</div>
</div>
<!-- Controls -->
<!-- Left -->
<div id="leftControl" style="position: absolute; margin-top: -20px; left: 20px;" class="tp-leftarrow tparrows default round" data-target="#carouselCustom" data-slide='prev'>
<div class="tp-arr-allwrapper">
<div class="tp-arr-iwrapper">
<div class="tp-arr-imgholder" style="visibility: inherit; opacity: 1; background-image: url("undefined");"></div>
<div class="tp-arr-imgholder2"></div>
<div class="tp-arr-titleholder"></div>
<div class="tp-arr-subtitleholder"></div>
</div>
</div>
</div>
<!-- Right -->
<div id="rightControl" style="position: absolute; margin-top: -20px; right: 20px;" class="tp-rightarrow tparrows default round" data-target="#carouselCustom" data-slide='next'>
<div class="tp-arr-allwrapper">
<div class="tp-arr-iwrapper">
<div class="tp-arr-imgholder" style="visibility: inherit; opacity: 1; background-image: url("undefined");"></div>
<div class="tp-arr-imgholder2"></div>
<div class="tp-arr-titleholder"></div>
<div class="tp-arr-subtitleholder"></div>
</div>
</div>
</div>
</div>
</div>
function zoom_image(img)
//Get the rel value of the image
var div_id = '';
var fullpath = img.attr('rel');
var splitpath = fullpath.split("_&");
var image_name = splitpath[0];
var slide_id = splitpath[1];
var new_slide_id = "slide_" + slide_id;
document.getElementById('zoomImage').src = image_name;
var currentSlide = document.getElementsByClassName('active item')[0].id;
console.log(new_slide_id);
//For loop to remove class and add class to the selected image
for (i = 0; i < imagesCount; i++)
div_id = "slide_" + i;
if (div_id !== new_slide_id)
//Remove all active class from the div
var removeB = document.getElementById(div_id);
removeB.className = "";
removeB.className = "item";
else
//Add active class to the div
var mouseoverSlide = document.getElementById(new_slide_id);
mouseoverSlide.className = "";
mouseoverSlide.className = "item active";
【问题讨论】:
【参考方案1】:好吧,既然您正在使用 Twitter Bootstrap,那么您很可能也在使用 jQuery(至少,Bootstrap 使用它),那么为什么不利用它来发挥自己的优势呢?
你可以这样做:
function zoom_image(img)
//Get the rel value of the image
var div_id = '';
var fullpath = img.attr("rel");
var splitpath = fullpath.split("_&");
var image_name = splitpath[0];
var slide_id = splitpath[1];
var new_slide_id = "slide_" + slide_id;
$('#zoomImage').attr("src", image_name);
$(".active.item").removeClass("active");
$("#"+new_slide_id).addClass("active");
这段代码我没测试过,试试看
================ 编辑================
重新阅读您的代码后,您可以进一步简化它:
对于初学者,您可以在代码中使用 data-* 属性,这样您就不必费力获得图像的 id。你在哪里:
<a onmouseover='return zoom_image($(this));' ...>
你可以有类似的东西
<a onmouseover='return zoom_image($(this));' data-image="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" data-target="<?php echo 'slide_".$thumbnailCnt; ?>" ...>
然后简单地说:
function zoom_image(img)
var image_name = img.attr("data-image");
var new_slide_id = img.attr("data-target");
$('#zoomImage').attr("src", image_name);
$(".active.item").removeClass("active");
$("#"+new_slide_id).addClass("active");
【讨论】:
您好,感谢您的帮助。测试了代码,它仍然在第一个图像的正下方创建了第二个图像轮播。 嗯。我猜你必须对指标做同样的事情。因为您还将其中一个设置为活动状态,并且您没有取消设置以上是关于图像轮播中的双“活动”类的主要内容,如果未能解决你的问题,请参考以下文章