0

在这里我正在实现一个图像滑块

我的问题是当我悬停图像滑块时，我想停止我的 css 转换属性。我尝试使用 addclass 和 removeclass 但失败了这是我的代码

HTML

<div id="container">
<img src="http://worksheetgenius.com/Next_button.jpg" width="106px;" id="right"/>
<img src="http://worksheetgenius.com/Previous_button.jpg" width="106px;"  id="left"/>

<div id="slider">

<div id="slide1" class="slide transition">
<a href="#" title="View my first image link"><img src="http://s.cghub.com/files/Image/030001-031000/30883/37_max.jpg"/></a>
</div>

<div id="slide2" class="slide transition">
<a href="#" title="View my second image link"><img src="http://www.f-16.net/attachments/83_1093_207.jpg" /></a>
</div>

<div id="slide3" class="slide transition">
<a href="#" title="View my first image link"><img src="http://www.sportbikes.net/forums/attachments/fz6/37654d1111746148-all-fz6-riders-show-us-your-bike-imag0005-edited-downscaled.jpg" /></a>
</div>

<div id="slide4" class="slide transition">          
<a href="#" title="View my third image link"><img src="http://3.bp.blogspot.com/-fpTz_1UegJM/TZ6eQWXTueI/AAAAAAAAASY/TsYJ5xZyixQ/s1600/banner_239.jpg" /></a>
</div>

</div>

</div>

CSS

#slider
{
overflow:hidden;
height:363px;
position:absolute;
left:180px;
top:159px;
padding:0px;
margin:0px;
background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
width:1000px;
}
#slide1
{
position:absolute;
left:0px;
z-index:1;

}
.slide
{
position:absolute;
left:1000px; 
}
.transition
{
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.notransition
{
-webkit-transition: none;
transition: none;
}
  #right
{
position:absolute;
top: 287.5px;
right: 127px;
z-index: 99;
}
#left
{
position:absolute;
top: 287.5px;
left: 127px;
z-index: 99;
}

脚本

   var t=setInterval(function(){$("#right").click()},5000);


$(document).ready(function()
{
    var present=1;
    var next=2;
    var total_slide=document.getElementById("slider").childElementCount;

    $("#right").click(function()
    {

        present_slide="#slide"+present;
        next_slide="#slide"+next;
        $(present_slide).css("left","1000px");
        $(next_slide).css("left","0px");
        present++;
        next++;
        if(present==(total_slide+1))
        {
            present=1;
            next=2;
            for(i=1;i<=total_slide;i++)
            {
                $("#slide"+i).css("left","1000px");
            }
            $("#slide1").css("left","0px");
        }

    });

    $("#left").click(function()
    {
        if(present==1)
        {
        next_slide="#slide"+total_slide;
        present_slide="#slide"+present;
        $(present_slide).css("left","1000px");
        $(next_slide).css("left","0px");

        present=total_slide;
        next=1;
        }else
        {
        next_slide="#slide"+(present-1);
        present_slide="#slide"+present;
        $(present_slide).css("left","1000px");
        $(next_slide).css("left","0px");
        present--;
        next--;
        }
        if(next==0)
        {
            present=(total_slide-1);
            next=total_slide;

        }
    });

$(".slide").on('mouseenter',function() 
{ $(this).removeClass('transition').addClass('notransition');});
$(".slide").on('mouseleave',function()   

{$(this).removeClass('notransition').addClass('transition');});
});



在上面提供的代码中，我用于类转换和无转换。

我也尝试使用CSS如下

.slide:hover
{
-webkit-transition: none;
    transition: none;
}
4

1 回答 1

0

我正在做一个类似的想法，最终我使用了 jquery Malsup Cycle这个循环插件。然后我使用了这段代码，但您可以在上面的链接中找到所有选项。

$(document).ready(function(){
    $('#slider').cycle({ 
            fx:      'scrollLeft', 
            speed:      1000, 
            timeout:    5000,
            pause:      1                   
        });
    });

将暂停标志设置为 1 可以获得您想要的功能，它将在悬停时停止动画。我希望这有帮助！

HTML

<div id = "slider">
    <div>
        Slide 1
    </div>
    <div>
        Slide 2
    </div>
    <div>
        Slide 3
    </div>
    <div>
        Slide 4
    </div>
</div>

您只需要链接到 html 中的插件，这应该提供我所看到的所需功能。您可以将任何您想要的内容放在 div 中。我在我们公司的页面上使用了一张带有简短描述的客户徽标图片作为横幅。

编辑：我更改了选择器以匹配您使用的 id。添加了 HTML。

于 2013-05-03T08:25:46.893 回答