jQuery图片旋转木马的实现

结果如下：



首先看看HTML代码，以及相应的CSS代码：

复制代码代码如下所示：









一
二
三
四
五



复制代码代码如下所示：
# scrollpics {
身高：150px；
宽度：100%；
边距：10px；
溢出：隐藏；
职位：相对；
}
Num {。
位置：绝对；
右：5px；
底部：5px；
}
# scrollpics.num李{
浮点数：左；
颜色：# ff7300；
文本对齐：中心；
行高：16px；
宽度：16px；
身高：16px；
光标：指针；
溢出：隐藏；
保证金：3px 1px；
边境：1px solid # ff7300；
背景颜色：# FFF；
}
# scrollpics.num李，{
颜色：# FFF；
行高：21px；
宽度：21px；
身高：21px；
字体大小：16px；
保证金：0 1px；
边界：0；
背景颜色：# ff7300；
字体粗细：粗体；
}


用绝对定位设置列表号的位置，将相关的样式设置为李，并在与显示图片相对应的数字列表中表示李的样式类别。

接下来是js代码：

复制代码代码如下所示：
/ /滚动广告
var = $（）；
var索引= 0； /图片编号
无功adtimer；
$（。民利）。Mouseover（function（）{）
索引= $（）。索引（这个）；鼠标暂停李索引
ShowImg（指数）；
}）。情商（0）。Mouseover（）；
停止/幻灯片动画，动画开始滑出。
$（# scrollpics）。Hover（function（）{）
ClearInterval（adtimer）；
}函数（）{（）
adtimer = setInterval（）{（）函数（
ShowImg（指数）
索引+；
如果（下标= =）最后一张图片，请先
索引= 0；
}
}，3000）；
}）。Trigger（MouseLeave ）；

ShowImg函数（指数）{
无功adheight = $（# scrollpics > 李：第一）Height（）；
$（）。
margintop ：- adheight *指数+PX / /变化的margintop属性的值来旋转效果
}，1000）；
$（。民利）。RemoveClass（）
。情商（指数），AddClass（）；
}