本文实例为大家分享了js轮播图焦点的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>轮播图焦点& lt;/title>
& lt;元内容="还是有地点小瑕疵,1左转变4,4右转变1的时候,图片切换有空白,换下动画模式应该可以?”比;
& lt; style>
* {
填充:0;
保证金:0;
}
ul {
list-style:没有;
}
.scroll {
宽度:300 px;
身高:200 px;
边界:1 px固体红;
保证金:100 px的汽车;
位置:相对;
溢出:隐藏;
}
.scroll ul.imgUl {
宽度:400%;
位置:绝对的;
上图:0;
左:0;
}
.scroll ul。李imgUl {
浮:左;
}
.scroll .imgUl img {
vertical-align:中间;/*消除图片间3 px的间距*/}
.scroll ul.focus {
位置:绝对的;
左:50%;
底部:10 px;
margin-left: -80 px;
}
.scroll ul。关注李{
宽度:20 px;
高度:20 px;
填充:5 px;
text-align:中心;
margin-right: 10 px;
边界:2 px固体黄;
浮:左;
颜色:红色;
粗细:700;
background - color: # 333;
颜色:白色;
}
.scroll ul。专注li.current {
background - color:一个;
}
.scroll .arrow {
宽度:100%;
位置:绝对的;
上图:50%;
左:0;
margin-top: -20 px;
显示:没有;
}
.scroll .arrow div {
宽度:40像素;
高度:40像素;
字体:700 18 px/40 px”宋体”;
text-align:中心;
背景:rgba (0, 0, 0, 0。3);
颜色:# fff;
光标:指针;
}
.scroll .arrow div.left {
浮:左;
}
.scroll .arrow div.right {
浮:正确;
}
& lt;/style>
& lt; script>
窗口。onload=function () {
函数(id)美元{返回. getelementbyid (id);}
var scrollDiv=$ (' scrollDiv ');
var imgul=$('图像');
var focusUl=$('是');
var imgLis=imgul.children;
var领袖=0,目标=0;
var curIndex=0;//记录当前图片的序号
var leftArrow=$ (' leftArrow ');
var rightArrow=$ (' rightArrow ');//可自动生成和图片对应的序号/* (var=0;i
& lt;/head>
& lt; body>
& lt; div类="滚动" id=皊crollDiv”比;
& lt; ul类=" imgUl " id=巴枷瘛北?
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/01.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/02.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/03.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/04.jpg " alt="祝辞& lt;/li>
& lt;/ul>
& lt; ul类="焦点" id=凹小痹?
& lt; li> 1 & lt;/li>
& lt; li> 2 & lt;/li>
& lt; li> 3 & lt;/li>
& lt; li> 4 & lt;/li>
& lt;/ul>
& lt; div类="箭" id=癮rrowDiv”比;
& lt; div类="左" id=" leftArrow祝辞& lt; & lt;/div>
& lt; div类="正确" id=" rightArrow祝辞祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
