Javascript 在图像滑块上使用div

我下面有一个图像滑块的代码，当你在图像上悬停时，它会停止。我想知道是否还有其他方法可以做到这一点，但是不用使用图像标记，而是使用div标记，这样我就可以使用CSS创建自定义形状。有人能给我指出正确的方向吗？当我尝试用div替换图像时，它会停止工作。有什么想法吗

#滚动条{
位置：绝对位置；
左：33%；
最高：14%；
}
#滚动条。内部滚动区域{
溢出：隐藏；
位置：绝对位置；
排名前10%；
底部：0；
左：0；
右：0；
}
#卷轴{
填充：0；
排名前10%；
位置：相对位置；
}
#卷轴李{
填充：0；
最高：7%；
列表样式类型：无；
位置：绝对位置；
}
.测试{
宽度：100px；
高度：200px；
背景色：粉红色；}

$（函数（）{
var scroller=$（“#scroller div.innerScrollArea”）；
var scrollerContent=scroller.children（'ul'）；
scrollerContent.children（）.clone（）.appendTo（scrollerContent）；
var-curX=0；
scrollerContent.children（）.each（函数（））{
var$this=$（this）；
$this.css（'left'，curX）；
curX+=$this.outerWidth（true）；
});
var fullW=curX/2；
var viewportW=scroller.width（）；
//滚动速度管理
var控制器={curSpeed:0，fullSpeed:2}；
变量$controller=$（controller）；
var tweentenowspeed=函数（新闻速度、持续时间）
{
如果（持续时间===未定义）
持续时间=600；
$controller.stop（true）.animate（{curSpeed:newSpeed}，duration）；
};
//悬停
scroller.hover（函数（）{
tweentenowspeed（0）；
}，函数（）{
tweenToNewSpeed（控制器全速）；
});
//滚动管理；启动自动滚动
var doscorl=函数（）
{
var curX=scroller.scrollLeft（）；
var newX=curX+controller.curSpeed；
如果（newX>fullW*2-viewportW）
newX-=fullW；
scroller.scrollLeft（newX）；
};
设置间隔（多斯克罗尔，40）；
tweenToNewSpeed（控制器全速）；
});

是的，您可以使用div标记，将类赋予div标记，然后使用css将图像插入该类。

您可以这样包装图像

在脚本中：

  <ul>
    <li><div class='slidingIMG'><img src="http://i1055.photobucket.com/albums/s511/Josh_Tilton/website/angels_landing_zpsn5dpgsui.jpg" width="536" height="263" /><div></li>
    <li><div class='slidingIMG'><img src="http://i1055.photobucket.com/albums/s511/Josh_Tilton/website/big_cottonwood_zpszx8qyyik.jpg" width="536" height="263" /><div></li>
  </ul>

---

我添加了另一个

元素，其中包含

和一些文本，它很好地停止了。里面根本没有图像

---

，它看起来像是在为我工作：）不过总体来说代码很棒。介意我保留这个片段并在我自己的项目中使用吗？我不是自己创建代码的

.slidingIMG img{

    height:10px;
}