jQuery实现旋转木马设备

旋转木马。
1，HTML框架
图片轮播装置

（UL >李* 4 > img { src=美元。JPG }）--> + OL >李* 4

一
二
三
四
2风格，CSS

在默认黑色之前清除该列表。
* {
保证金：0；
填充：0；
}
img {
边界：0；
}
OL，UL，黎式列表样式：无；}
体{
保证金：50px；
}
包{。
宽度：500px； / *图片的高度和宽度。
身高：350px；
border: 1px solid红；
位置：相对；以绘制参考位置的照片。
溢出：隐藏；这将超过隐藏部分的长度和宽度。
}
包装UL
宽度：2000px； / *列表四图片的宽度。
位置：绝对值；防止溢出的图片
左：0；
顶部：0；
}
包装UL Li {
浮动：左；四*图片旁边的侧身安排*
宽度：500px；
}
包装{ {
位置：绝对；
底部：10px；
右：10px；
}
包装李{ {
浮动：向左；
宽度：16px；
身高：16px；
行高：16px；
文本对齐：在举重显示的元素列表中的字体；
颜色：# FFF；
背景：# 000；
border: 1px solid黄；
右边距：3px； / *距离的列之间。
光标：指针；
}
包装李，目前{
背景：# FFF；
颜色：# 000；
}
包装，介绍{
宽度：400px；
身高：30px；
行高：30px；
背景：RGBA（0, 0, 0，0.5）；
*达到透明显示功能；或不透明：0.5；
筛选器：alpha（不透明度= 50）；*
颜色：# FFF；
位置：绝对；
底部：0；
左：0；
}
3、js控件

$（文档）Ready（函数（）{）
VaR，=美元（'。包UL '）； / /排队；
Var Ali = $（换行）；
无功numli = $（'。包OL里'）； / /得到的数字列；
无功aliwidth = $（'包' ul）。情商（0）（宽度）； / /获得单像素宽度；
无功_now = 0； / /计数器的数字控制方式
无功_now2 = 0； / /这是一个移动的距离控制计数器的形象
VaR胆小； / /定时开关
VaR的aimg =美元（'。包UL IMG）； / /包得到img元素
var = $（换行）。
NumLi.click（function（）{ / /鼠标点击触发功能；
var索引=（this）（index）；如果您单击第一个图片，索引= 0；
_now =指数；
无论是_now或_now2 / /点击指数同步；
_now2 =指数；
无功imgalt = aimg.eq（_now）。Attr（'alt '）； / /得到_now时ALT值
Op.html（imgalt）； / / ATL价值

$（这）。AddClass（当前的），兄弟姐妹（）RemoveClass（）；
添加和删除/数字样式；
oul.animate（{右：- aliwidth *指数}，500）；
图片元素移动，在左边左边的包- 500 *索引距离。
}）；
函数滑块（）{
如果（_now = = numli.size（- 1））{ / /当滚动到第四张图片
Ali.eq（0）。Css（{ / /通过到最后一个第一定位方法；
位置：'relative，
左：oul.width（）
}）；
_now = 0；
}
别的{
_now + +； / /如果没有达到第四，这将是_new + 1；
}
_now2 + +； / / + 1幅控制计数器；
numli.eq（_now）。AddClass（当前的）（兄弟姐妹）（RemoveClass）； / /添加和删除数字风格；
无功imgalt = aimg.eq（_now）。Attr（'alt '）； / /得到_now时ALT值
Op.html（imgalt）； / / ATL价值
oul.animate（{右：- aliwidth * _now2 }，500、函数（））{
图片元素/移动，在包的左侧，左侧500×当下的距离
如果（_now = = 0）{
Ali.eq（0）。Css（下，静态的）；
Oul.css（右，0）；
_now2 = 0；
}
}）；
}

我= setInterval（滑块，1500）；
/ / 1500ms，自动切换图片
鼠标点击图片是停止定时器，停止自动切换图片左键切换图片计时器；
/ / $（'包'）。Mouseover（函数（事件）{
/ / clearInterval（我）；
}；

/ / $（'包'）。Mouseover（函数（事件）{
/ /我= setInterval（滑块，1500）；
}；

$（换行）。Hover（函数（）{）
ClearInterval（我）；

}函数（）{（）
我= setInterval（滑块，1500）；

}）；
}）；
*重要功能
1。获取每个标签的值并显示

无功imgalt = aimg.eq（_now）。Attr（'alt '）； / /得到_now时ALT值
Op.html（imgalt）； / / ATL价值
2。改变数码风格

$（这）。AddClass（当前的），兄弟姐妹（）RemoveClass（）；
添加和删除/数字样式；

三.滚动图片

oul.animate（{右：- aliwidth *指数}，500）；
图片元素移动，在左边左边的包- 500 *索引距离。

*注意点
1。同步
_now =指数；

无论是_now或_now2 / /点击指数同步；

单击鼠标后，索引可能会变成3。松开鼠标后，我们希望_now将从3到0，但由于_now加1后_now setInterval，实际上从0到1，所以我们需要同步_now和指数。
2。计数器
对_now2的作用是防止母元离开一幅空白在第一；数字定时器与画面不同步运动控制定时器。

无功_now = 0； / /计数器的数字控制方式
无功_now2 = 0； / /这是一个移动的距离控制计数器的形象

三.相对属性

如果（_now = = 0）{
Ali.eq（0）。Css（下，静态'）； / /相对属性
Oul.css（右，0）； / /什么时候去相对结束，恢复UL左边的值是0；
_now2 = 0；

4。到物业的时间到了
oul.animate（设置CSS属性的{ }，500、函数（）））的功能是术后500ms执行；

oul.animate（{右：- aliwidth * _now2 }，500、函数（））{
图片元素/移动，在包的左侧，左侧500×当下的距离
根据一组CSS动画的执行属性
如果（_now = = 0）{
Ali.eq（0）。Css（下，静态的）；
Oul.css（右，0）；
_now2 = 0； / /当_now是0，_now2也应该回到0；
}
}）；

*困难
首先，学习获取元素的值。

其次，要了解几个函数；

此外，灵活使用变量，了解每个变量的值；

最后，定时器的控制是最困难的。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。