jQuery代码图片旋转木马效果

用jQuery前整理实现图片旋转木马效果。



1。不要操作，自动旋转木马

2。鼠标悬浮在图像中，自动停止旋转木马，隐藏在图片中的箭头将显示出来。

三.手动旋转木马1：将鼠标的小按钮标记在图片的底部，可以切换图片。

4。手动2：点击箭头旋转木马也可以切换图片



效果图：（PS：软件被捕获，不太多，感觉画面失真）



下面是代码区域：



* inde.html部分代码***














>







* * * * * * reset.css代码


箱{。
填充：0；
宽度：800px；
身高：500px；
保证金：0汽车；
职位：相对；
}
UL。img {
填充：0；
保证金：0汽车；
}
UL。IMG。照片{
列表样式：无；
位置：绝对；
显示：无；
}
Img{
宽度：800px；
身高：500px；
}
。箱。IMG主动{。
显示块；
}



JT {。
宽度：40px；
身高：50px；
背景颜色：RGBA（0,0,0,0.5）；
位置：绝对；
顶部：50%；
边距：- 25px；
行高：50px；
字体大小：30px；
颜色：白色；
字体重量：800；
文本对齐：中心；
显示：无；
}
# jtright {
权利：0；
}


numlist {。
字体大小：0；
位置：绝对；
底部：10px；
左：50%；
margin-left: - 70px；
}
。numlist。Num {
背景颜色：黑色；
宽度：20px；
身高：20px；
边框半径：50%；
颜色：白色；
文本对齐：中心；
字体大小：14px；
显示：内联块；
}
。numlist。检查{
背景颜色：红色；
}



* * * * * * main.js代码


$（函数（）{（））
*用于记录的全局变量的定义，表示图片显示下标*
var I＝0；

根据要添加的图像数目。
变量大小= $（）；
对于（var j = 1；j =大小；j + +）{
var = $（++）；
$（。numlist ）追加（跨度）；
}
选择第一个下标并显示第一个图片。
$（。照片：情商（0））。AddClass（主动）；
$（。民：情商（0））。AddClass（检查）；

手动/旋转木马
Var HandleImgChange =函数（）{
$（）。每个（函数（）{）
$（这）。Mouseover（function（）{）
$（这），兄弟姐妹（）。RemoveClass（检查）；
$（这）。AddClass（检查）；

获得一个值的选择。
i = $（this）；
$（）。隐藏（）；
$（）。Eq（I）；
}）；
}）；
}；

显示一幅图片
var移动=函数（）{
++；
如果（我> size-1个）{
我= 0；
}
$（。民）。Eq（我），AddClass（检查），兄弟姐妹（）。RemoveClass（检查）；
Eq（I）；
}；

自动旋转木马
autoimgchange =函数（）{ var
var t = setInterval（移动，1000）；
Hover（函数（）{）
$（this）。Css（）指针}）；
$（）。Css；
clearInterval（T）；
}函数（）{（）
$（）。Css；
T = setInterval（移动，1000）；
}）
}；

设置箭头单击事件。
JTL =函数（）{ var
$（# jtleft）。Click（function（）{）
我--；
如果（i < 0）{
我= size-1个；
}
$（。民）。Eq（我），AddClass（检查），兄弟姐妹（）。RemoveClass（检查）；
Eq（I）；
}）
}；
经=函数（）{ var
$（# jtright）。Click（function（）{）
移动（）；
}）
}；

HandleImgChange（）；
AutoImgChange（）；
（JTR）；
（JTL）；
}）；




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