滑块无法正常工作 - 滑块中显示2个图像

Question

This is my fiddle

<div id="index-1" class="main-wrapper">
<div id="bg" class="main">
    <img alt="Main BG" src="http://dedicatedguru.com/demo/mhsplanner/wp-content/uploads/wedding-plan.jpg" class="main-bg" style="display: block; width: 100%;">
    <img alt="Brand BG" src="http://dedicatedguru.com/demo/mhsplanner/wp-content/uploads/event-plan.jpg" class="brand-bg" style="display: none; width: 100%;">
    <img style="display: none; width: 100%;" alt="INspiration" src="http://dedicatedguru.com/demo/mhsplanner/wp-content/uploads/wedding-consultant.jpg" class="inspiration-bg">
</div>
<section id="our-services">
    <div class="container">
        <div class="row" id="services-col">
            <div class="col-xs-12 col-xs-4" id="main-bg">
                <a href="/#">
                    <div class="service2 service-2" data-img="main-bg">
                        <div class="service-details2" align="center">
                            <h3>Wedding Planning Services</h3>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.col-sm-4 -->
            <div class="col-xs-12 col-xs-4">
                <a href="/#">
                    <div class="service2 service-2" data-img="brand-bg">
                        <div class="service-details2" align="center">
                            <h3>Event Planning Services</h3>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.col-sm-4 -->
            <div class="col-xs-12 col-xs-4" id="inspiration-bg">
                <a href="/#">
                    <div class="service2 service-2" data-img="inspiration-bg">
                        <div class="service-details2" align="center">
                            <h3>Wedding Consultant Services</h3>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.col-sm-4 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>
<!-- /#our-services -->

$(function(){
        $(".service2").hover(function() {
            clearInterval(timer);
            $('#bg').children('img').each(function () {
              $(this).css("display", "none");
            });
            $('.'+$(this).data("img")).css("display", "block");
        });
    });
    $('#bg').hover(function(ev){
        clearInterval(timer);
    }, function(ev){
        timer = setInterval(function() { 
              $('#bg > img:first')
                .css("display", "none")
                .next()
                .css("display", "block")
                .end()
                .appendTo('#bg');
            },  3000);
    })

我用js创建了一个简单的滑块。但是我有一个问题，就像我上面的演示一样。 - 当我在其中悬停3块时，滑块会改变。 - 不悬停时，它会自动更改 - ＆GT;我的问题是当我将鼠标悬停在第三个区块（然后将其悬停）时，例如，＆＃34; Interval＆＃34;函数将在此后自动显示图像编号2。然后我的滑块坏了（图像编号2和3将同时显示）。 你能帮我解决这个问题吗？非常感谢！