js自动旋转效果图（自适应屏幕宽度+滑动触摸屏手机）

使用js 1，旋转木马的图形，需要参考jQuery包，另一种实现是动画，实现自适应旋转木马，并转换平滑的旋转木马（在代码中的注释）。

2。代码中的图片可以自行替换。样式和逻辑都是用js编写的。

3，html标签代码，js代码
箭头/旋转木马
旋转木马/图片
$（文档）Ready（函数（）{）
len = $（var。滑块里）。length-1；
将样式设置为滑块。
$（滑块）。Css（{
宽度：100%
高度：继承
溢出隐藏
：内联块
}）；

将宽度设置为UL
$（幻灯片）。Css（{
位置：相对
宽度：（（len + 1）* 100）。ToString（）+%
空白：0
填充：0 }；
设置为
$（幻灯片）。Css（{
宽度：（100 /（len + 1））。ToString（）+%
浮动：左
}）；
设置图片的宽度
$（响应）。Css（{
宽度：100%
高度：继承
}）；
控件样式
$（滑块）。Css（{
位置：绝对
Z：999
：指针
}）；
$（。滑块。lastpic）。Css（{
左：0
边距顶部：7%
}）；
$（。滑块。nextpic）。Css（{
右：0
边距顶部：7%
}）；
动画活动
var I＝0；
$（。nextpic）。Click（function（）{）
MoveNext（我）；
}）；
$（。lastpic）。Click（function（）{）
MoveLast（我）；
}）；
自动/旋转木马
VaR定时器= setInterval（）函数（）{
MoveNext（我）；
}，5000）；
MoveNext =功能（N）{
如果（= =）
i = 1；
$（幻灯片）。动画（{右}，}，800）；
其他{ }
$（。滑块。幻灯片）。动画（{右：（（（n + 1）* 100）。ToString（）+%}，800）；
}
++；
}
MoveLast =功能（N）{
如果（n＝0）{
i =透镜+ 1；
$（。滑块。幻灯片）。动画（{右：（Len×100）。ToString（）+%}，800）；
其他{ }
$（。滑块。幻灯片）。动画（{右：（（（N-1）* 100）。ToString（）+%}，800）；
}
我--；
}
手机触摸效果
层的endx，继续前进；
功能touchstart（事件）{
var触摸=事件。触摸{ 0 }；
touch.pagex startx =；
}
功能touchmove（事件）{
var触摸=事件。触摸{ 0 }；
endx = touch.pagex；
}
功能touchend（事件）{
Movex = - endx startx；
如果（Movex > 50）{
MoveNext（我）；
} else if（Movex < 50）{
MoveLast（我）；
}
}
document.getelementbyid（幻灯片）。AddEventListener（touchstart
document.getelementbyid（幻灯片）。AddEventListener（touchmove
document.getelementbyid（幻灯片）。AddEventListener（touchend
过渡移动固定宽度不能自适应。
/ / $（。nextpic ）（点击（功能）{
如果（i = =）
i = 1；
。
过渡时间功能： / / 'linear，
过渡期： / / '800ms，
/ / 'transform：'translatex（0px）。
}
其他{
。
过渡时间功能： / / 'linear，
过渡期： / / '800ms，
/ / 'transform：'translatex（- +（i + 1）*宽+ 'px）。
}
}
；
}；
/ / $（。lastpic ）（点击（功能）{
如果（i = 0）{ / /
i =镜头+ 1；
。
过渡时间功能： / / 'linear，
过渡期： / / '800ms，
/ / 'transform：'translatex（- +长*宽+ 'px）。
}
其他{
。
过渡时间功能： / / 'linear，
过渡期： / / '800ms，
/ / 'transform：'translatex（- +（i-1）×宽+ 'px）。
}
}
i；
}

}）；
以上是萧边介绍JS自动轮播效果图（自适应屏幕宽度+滑动触摸屏手机），希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时回复你。谢谢你的支持网站。