-
HTML：
世界跆拳道联盟
>
CSS：
。箱{宽度：1200px；身高：300px；变换风格：perserve-3d；保证金：50px汽车；位置：相对；}
img {。箱宽度：600px；位置：绝对；顶部：60px；过渡：all.3s线性；}
。盒：徘徊。BTN {不透明度：1；}
。前{左：0px；}
左：600px。回来{；}
。主动{左：300px；变换：规模（1.5）；Z指数：10；}
。btns.btn {宽度：60px；身高：60px；显示：块；位置：绝对；背景颜色：RGBA（0,0,0，。5）；字体大小：50px；font-family:微软雅黑；颜色：RGBA（255255255。5）；线高度：55px；文本对齐：中心；光标：指针；Z指数：100；不透明度：0；过渡：opacity.3s线性；}
。BTNs。按钮：第一个孩子前：125px {；}
最后一个孩子。BTNs。BTN：{顶：125px；右：0px；}
JS：
指针函数（）{
Var BTNs = document.getelementsbyclassname（'btn），
IMGS = document.getelementsbyclassname（'box）{ 0 } getElementsByTagName（'img）；
var指数= 2，
前0，
返回= 0，
偏移量=假，
= setInterval定时器（定时器，5000）；
对于（var i = 0；i < btns.length；i++）{
（函数（i）{）
BTNs {我}。onclick=函数（）{点击（我）}；
}）（一）；
BTNs {我}。onmouseover =函数（）{
偏移＝真；
}
BTNs {我}。onmouseout=函数（）{
偏移量=假；
}
}
对于（var i = 0；i < imgs.length；i++）{
IMGS {我}。onmouseover =函数（）{
偏移＝真；
}
IMGS {我}。onmouseout=函数（）{
偏移量=假；
}
}
函数定时器（）{
console.log（偏移）
如果（偏移）{
返回；
}
别的{
点击（1）
}
}
函数单击（x）{
IMGS {指数}。setAttribute（' '，' '）；
如果（x = 0）{
如果（-索引< 0）{
指数= --imgs.length；
}
前=索引；
如果（+ +前>——IMGS。长度）{前= 0 }
如果（回< 0）{回=——IMGS长度}。
IMGS {前}。style.zindex = 1；
IMGS {回}。style.zindex = '0'；
}
别的{
如果（+指数>——IMGS。长度）{
索引= 0；
}
前=索引；
如果（+ +前>——IMGS。长度）{前= 0 }
如果（回< 0）{回=——IMGS长度}。
IMGS {前}。style.zindex = '0'；
IMGS {回}。style.zindex = 1；
}
IMGS {指数}。style.zindex = 10'；
IMGS {前}。setAttribute（' '，'front）
IMGS {回}。setAttribute（' '回归'）
IMGS {指数}。setAttribute（阶级、活动）；
}
}
激动人心的话题分享：jQuery javaｓｃｒｉｐｔ引导图片旋转木马图片旋转木马图片旋转木马
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。