带向下滑动的Jquery图像滑块

现在它似乎工作得很好，除了我一直遇到两个错误。当.desc向下滑动并转到下一个图像时，图像中的旧.desc将位于图像2的.desc的顶部。第二个错误是，如果你在它上面，然后把鼠标从上面拿下来，再把鼠标悬停在它上面。desc会发疯，会上下几次。我想不出如何解决这两件事，任何帮助都是非常感谢的

#scrollWork {
    padding: 50px 50px 100px 50px;
    background: #020303;
    position: relative;
    width: 924px;
}


.desc {
    width: 287px;
    height:250px;
    border: solid 3px #0e0f0e;
    padding: 10px 0px 0px 10px;
    background: #121010;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 101;
    filter:alpha(opacity=80);
    opacity: 0.8;  

}

.desc strong {
    color:#262525;
    font-size: 15px;
}

.desc p {
    margin-left: 10px;
}

.desc a {
    color:#FF02FE;
    text-decoration: none;
}

.desc a:hover {
    text-decoration: underline;

}


.window {
    height:355px;   width: 924px;
    overflow: hidden; 
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left;}


    /*--Paging Styles--*/
.paging {
    width: 924px; height:47px;
    z-index: 100;
    text-align: center;
    line-height: 40px;
    display: none; 
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}

.paging a.active {
    font-weight: bold; 
    background: #9502ad; 
    border: 1px solid #6b2f74;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}





//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){    
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){        
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
        $active = $('.paging a.active').next();
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 10000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation
});    

//slide up and down when hover over heading 2
$(".window").hover(function(){
    // slide toggle effect set to slow you can set it to fast too.
    $(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideToggle("slow");
    return true;
});

//On Click
$(".paging a").click(function() {    
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
});   






<div id="scrollWork">
    <div class="title">
        <h2 class="titleWork">Work</h2>
        <ul class="pagenav">
            <li class="pagenavTitle">Navigate To:</li>
            <li class="pagenavWork"><a title="work" href="#scrollWork">Work</a></li>
            <li class="pagenavServices"><a title="services" href="#scrollServices">services</a></li>
            <li class="pagenavAbout"><a title="about" href="#scrollAbout">about</a></li>
            <li class="pagenavContact"><a title="contact" href="#scrollContact">contact</a></li>
        </ul>
    </div>
<div class="window">
    <div class="image_reel">
        <a href="#?w=700" rel="popupWork-1" class="poplight"><img src="image1.png" width="924" height="345" alt="ProZap Business Cards" /></a> 
        <a href="#?w=700" rel="popupWork-2" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 2" /></a> 
        <a href="#?w=700" rel="popupWork-3" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 3" /></a> 
        <a href="#?w=700" rel="popupWork-4" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 4" /></a> 
        <a href="#?w=700" rel="popupWork-5" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 5" /></a>
    </div>
    <div class="descriptions">
        <div class="desc"><strong>Client</strong>
            <p>Snap</p>
            <strong>URL</strong>
            <strong>Date</strong>
            <p>December 2009</p>
            <strong>Task</strong>
            <p>Design</p>
            <strong>Tools</strong>
            <p>Photoshop, Illustrator</p>
        </div>
        <div class="desc"><strong>Client</strong>
            <p>ProZap</p>
            <strong>URL</strong>
            <strong>Date</strong>
            <p>January 2010</p>
            <strong>Task</strong>
            <p>Design</p>
            <strong>Tools</strong>
            <p>Photoshop, Illustrator</p>
        </div>
        <div class="desc"><strong>Client</strong>
            <p>Vestax Spin</p>
            <strong>URL</strong>
            <strong>Date</strong>
            <p>October 2009</p>
            <strong>Task</strong>
            <p>Design, IPB, Template Engine, SEO</p>
            <strong>Tools</strong>
            <p>Photoshop, IPB</p>
        </div>
        <div class="desc"><strong>Client</strong>
            <p>Vestax Spin</p>
            <strong>URL</strong>
            <strong>Date</strong>
            <p>Febuary 2010</p>
            <strong>Task</strong>
            <p>Design</p>
            <strong>Tools</strong>
            <p>Photoshop, Illustrator</p>
        </div>
        <div class="desc"><strong>Client</strong>
            <p>Vestax Spin</p>
            <strong>URL</strong>
            <strong>Date</strong>
            <p>January 2010</p>
            <strong>Task</strong>
            <p>Design, Front-end Development, WordPress Integration, SEO</p>
            <strong>Tools</strong>
            <p>Photoshop, Dreamweaver</p>
        </div>
    </div>
</div>
<div class="paging">
    <a href="#" rel="1">Snap</a> |
    <a href="#" rel="2">ProZap</a> |
    <a href="#" rel="3">Movie Loons</a> |
    <a href="#" rel="4">Creature Studios</a> |
    <a href="#" rel="5">Project Named 5</a>
</div>

#滚动工作{
填充：50px 50px 100px 50px；
背景#020303；
位置：相对位置；
宽度：924px；
}
.描述{
宽度：287px；
高度：250px；
边框：实心3px#0e0f0e；
填充：10px 0px 0px 10px；
背景：#121010；
显示：无；
位置：绝对位置；
排名：0；
右：0；
z指数：101；
过滤器：α（不透明度=80）；
不透明度：0.8；
}
德斯壮先生{
颜色：#262525；
字体大小：15px；
}
.描述p{
左边距：10px；
}
.描述a{
颜色：#FF02FE；
文字装饰：无；
}
.描述a:悬停{
文字装饰：下划线；
}
.窗户{
高度：355px；宽度：924px；
溢出：隐藏；
位置：相对位置；
}
.图像卷{
位置：绝对位置；
顶部：0；左侧：0；
}
.image_卷盘img{float:left；}
/*--分页样式--*/
.传呼{
宽度：924px；高度：47px；
z指数：100；
文本对齐：居中；
线高：40px；
显示：无；
}
.传呼a{
填充物：5px；
文字装饰：无；
颜色：#fff；
}
.呼叫a.激活{
字体大小：粗体；
背景：公元9502年；
边框：1px实心#6b2f74；
-moz边界半径：3px；
-khtml边界半径：3px；
-webkit边界半径：3px；
}
//设置每个投资组合的默认状态
$（“.paging”）.show（）；
$（“.paging a:first”）.addClass（“active”）；
//获取图像的大小，有多少图像，然后确定图像卷轴的大小。
var imageWidth=$（“.window”）.width（）；
var imageSum=$（“.image\u卷筒img”）.size（）；
var imageReelWidth=imageWidth*imageSum；
//将图像卷轴调整为其新尺寸
$（“.image_-reel”）.css（{'width'：imageReelWidth}）；
//分页+滑块功能
旋转=函数（）{
var triggerID=$active.attr（“rel”）-1；//获取要滑动的次数
var image\u reelPosition=triggerID*imageWidth；//确定图像卷轴需要滑动的距离
$（“.paging a”）.removeClass（'active'）；//删除所有活动类
$active.addClass（'active'）；//添加active类（在rotateSwitch函数中声明$active）
//滑块动画
$（“.image_-revel”）。设置动画({
左：-图像位置
}, 500 );
};
//旋转+定时事件
旋转开关=函数（）{
play=setInterval（函数（）{//Set timer-每3秒重复一次
$active=$（'.paging a.active'）.next（）；
如果（$active.length==0）{//如果分页到达末尾。。。
$active=$（'.paging a:first'）；//返回到first
}
rotate（）；//触发分页和滑块函数
}，10000）；//计时器速度（毫秒（3秒）
};
旋转开关（）//启动时运行函数
//悬停
$（“.image_卷盘a”）.hover（函数（）{
clearInterval（播放）；//停止旋转
}，函数（）{
旋转开关（）；//恢复旋转
});    
//悬停在航向2上方时上下滑动
$（“.window”）.hover（函数（）{
//滑动切换效果设置为“慢”，您也可以将其设置为“快”。
$（“.desc”）.eq（$（'.paging a.active'）.attr（“rel”）-1）.slideToggle（“slow”）；
返回true；
});
//点击
$（“.a”）。单击（函数（）{
$active=$（this）；//激活单击的分页
//重置计时器
clearInterval（播放）；//停止旋转
rotate（）；//立即触发旋转
旋转开关（）；//恢复旋转
返回false；//防止浏览器跳转到链接定位
});   
工作

导航到：





客户端
折断

URL
日期
2009年12月

任务
设计

工具
Photoshop，Illustrator

客户端
百忧解

URL
日期
2010年1月

任务
设计

工具
Photoshop，Illustrator

客户端
灶神星旋转

URL
日期
2009年10月

任务
设计，IPB，模板引擎，搜索引擎优化

工具
Photoshop，IPB

客户端
灶神星旋转

URL
日期
2010年2月

任务
设计

工具
Photoshop，Illustrator

客户端
灶神星旋转

URL
日期
2010年1月

任务
设计、前端开发、WordPress集成、SEO

工具
Photoshop，Dreamweaver

|
|
|
|

---

在开始幻灯片动画之前，可以使用jQuery的

.stop（）

解决第二个问题。这样，当你快速地来回走动时，它就不会在你的身体里堆积起来

$('.myCoolMenu').stop().slideDown();