这篇文章主要为大家详细介绍了射流研究…实现幻灯片轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现幻灯片轮播图的具体代码，供大家参考，具体内容如下
1.html
选取了五张图片放入差异中，然后是左右箭头，以及按钮，代码如下
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题轮播图/标题
链接href='./css/轮播图css' rel='stylesheet '
/头
身体
div id='box '
img src='./image/car-1.jpg '
img src='./image/car-2.jpg '
img src='./image/car-3.jpg '
img src='./image/car-4.jpg '
img src='./image/car-5.jpg '
div class='arrow '
a class=' left ' href=' javacript:void(0)；'/a
a class=' right ' href=' javacript:void(0)；'/a
/div
ul class='btn '
li class='on' slideIndex='1'1/li
li slideIndex='2'2/li
li slideIndex='3'3/li
li slideIndex='4'4/li
li slideIndex='5'5/li
/ul
/div
脚本src='./js/轮播图' js '
/脚本
/body
/html
2.css给div设置居中
将所有图片隐藏，设置箭头和小圆点的样式
代码如下
*{
边距：0;
填充：0;
文字-装饰：无；
列表样式：无；
}
#框{
宽度：800像素
高度：500像素
边距：50px自动0px
位置：相对；
}
#框图像{
宽度：800像素
高度：500像素
显示：无；
动画：淡化3s；
}
#方框。箭头{
宽度：800像素
高度：80px
位置：绝对；
top:50%；
边距-顶部：-40px；
}
#方框。箭头。左，右{
显示：内嵌-块；
行高：80px
宽度：50px
高度：80px
}
#方框。箭头。左：悬停{
背景：rgba(0，0，0，0.8)；
}
#方框。箭头。右：悬停{
背景：rgba(0，0，0，0.8)；
}
#方框。箭头。右{
文本对齐：右对齐；
位置：绝对；
右：0;
}
#方框。箭头一个{
字体大小：50px
颜色：# ffffff
}
#方框btn{
位置：绝对；
底部：10px
左：50%;
左边距：-98.47 px；
文本对齐：居中；
}
#方框100 . BTN李
文本对齐：居中；
保证金：0 5px
填充：10px
浮动：左；
背景：白色；
边界半径：20%;
光标：指针；
过渡：背景2s缓和；
}
#方框btn .在{
背景：# 000;
颜色：白色；
}
@关键帧淡化{
从{
不透明度：4;
}
到{
不透明度：1;
}
}
3.js部分
射流研究…设定让当前图片显示显示：块，其他图片隐藏显示：无；
射流研究…代码如下
window.onload=function () {
var left=文档。getelementsbyclassname(' left ')[0]；
var right=文档。getelementsbyclassname(' right ')[0]；
var BTN=文档。getelementsbyclassname(' BTN ')[0].getElementsByTagName(' Li ')；
var box=文档。getelementbyid(' box ')；
var滑动指数=1；
定义变量指数=1;
定义变量定时器；
//图片切换函数
放映幻灯片(幻灯片索引)；
函数放映幻灯片(n) {
var slides=文档。getelementbyid(' box ').getElementsByTagName(' img ')；
for(var I=0；伊斯利德斯。长度；i ){
幻灯片[I]。风格。display=' none
btn[i].类名=" "；
}
幻灯片[幻灯片索引-1]。风格。display=' block
幻灯片索引-1。"开"
}
//箭头切换
left.onclick=function () {
if(slideIndex1) {
幻灯片索引-；
放映幻灯片(幻灯片索引)；
}否则{
滑动指数=5；
放映幻灯片(幻灯片索引)；
}
}
right.onclick=function () {
if(slideIndex5) {
幻灯片索引
放映幻灯片(幻灯片索引)；
}否则{
滑动指数=1；
放映幻灯片(幻灯片索引)；
}
}
//btn切换
for(var I=0；长度)
btn[i].onclick=function () {
var myslideIndex=this。get属性(“幻灯片索引”)；
//var myindex=parse int(this。get属性(' index ')；
slideIndex=myslideIndex
放映幻灯片(幻灯片索引)；
}
}
//自动播放
函数播放(){
timer=setInterval(function () {
没错。onclick()；
},4000);
}
函数stop() {
间隙(定时器);
}
box.onmouseout=play
box.onmouseover=stop
play()；
}
精彩专题分享：jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。