Der Editor unten zeigt Ihnen ein natives JS-Karussellbild mit weißen Punkten Erklärung mit Beispielen. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Editor, um einen Blick darauf zu werfen.
Wir haben gerade über das native Karussellbild von js gesprochen. Fügen Sie nun kleine Punkte hinzu, die sich mitbewegen können!
CSS-Code:
*{
margin:0px;
padding: 0px;
}
ul{
width: 2500px;
height: 300px;
position: absolute;
}
li{
float: left;
list-style: none;
}
img{
width: 500px;
height: 300px;
}
p{
width: 500px;
height: 300px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
/*小白点的ul*/
#round_ul{
width:300px;
height: 30px;
/*background:yellow;*/
position: relative;
margin: 250px auto;
}
#round_ul li{
width: 20px;
height:20px;
border-radius: 50%;
background: #2196f3;
margin-left: 50px;
cursor: pointer;
}HTML-Code:
<p> <ul> <li><img src="img/31.jpg"></li> <li><img src="img/32.jpG"></li> <li><img src="img/33.jpG"></li> <li><img src="img/34.jpg"></li> <li><img src="img/31.jpg"></li> </ul> <ul id="round_ul"> <li></li> <li></li> <li></li> <li></li> </ul>
JS-Teil:
<script type="text/javascript">
//页面加载完成后 执行代码
window.onload = function(){
//获取 ul
var imgUl = document.getElementsByTagName("ul")[0];
var groundUl = document.getElementById("round_ul");
//把第一个小白点修改成红色children 节点的子节点(不算空白节点)
groundUl.children[0].style.backgroundColor = "red";
var sId,x = 0;
//开始计时器函数
function fn(){
sId = setInterval(abc,10);
}
function abc(){
//每隔10秒修改ul的坐标,修改1px
imgUl.style.left = x-- +"px";
//如果一张图片完全进入到p中
if(x % 500 == 0){
//调用修改小白点函数
if(x == -2000){
x = 0;
imgUl.style.left = 0 +"px";
}
changLi(Math.abs(x/500));//调用修改小白点方法
clearInterval(sId);//暂定定时器
setTimeout(fn,1000);//隔100毫秒在次启动定时器
}
}
fn();
//修改小白点方法
function changLi(num){
//遍历小白点数组
for(var x = 0;x<4;x++){
//把所有的点修改成蓝色
groundUl.children[x].style.backgroundColor = "#2196f3";
}
//把相对应的小白点修改成红色
groundUl.children[num].style.backgroundColor = "red";
}
}
</script>Das ist es! ! Verstehst du? ?
Das obige ist der detaillierte Inhalt vonBeispielcode für die gemeinsame Nutzung eines nativen js-Karusselldiagramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
