Question

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

我的问题是当我悬停我的图像滑块时，我想停止我的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;
}

Answer 1

我做了类似的想法，最后我使用了这个循环插件来进行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。

在鼠标上转换过渡

1 个答案: