JavaScript实现轮播图效果代码实例

这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

HTML部分:

<!-- HTML部分 -->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>轮播图</title>

<link rel="stylesheet" type="text/css" href="css/demo06.css" rel="external nofollow" />

<script src="js/demo06.js"></script>

</head>

<body>

<div class="container">

<!-- 轮播图区域 -->

<ul class="lbimg">

<li class="on" style="background-color: #898989;">轮播图1</li>

<li style="background-color: #CD282B;">轮播图2</li>

<li style="background-color: pink;">轮播图3</li>

<li style="background-color: peachpuff;">轮播图4</li>

<li style="background-color: palegoldenrod;">轮播图5</li>

</ul>

<ol class="btn">

<li class="active">第1张</li>

<li>第2张</li>

<li>第3张</li>

<li>第4张</li>

<li>第5张</li>

</ol>

</div>

</body>

</html>

CSS部分

*{

margin: 0;

padding: 0;

list-style: none;

}

.container{

width: 600px;

height: 400px;

border: 4px double #FF6633;

margin: 0 auto;

}

/* 轮播图 */

.lbimg li{

width: 100%;

height: 350px;

text-align: center;

line-height: 350px;

display: none;

font-size: 25px;

color: #FF6633;

}

.lbimg .on{

display: block;

}

.btn{

width: 100%;

height: 50px;

background-color: #3CBDFF;

display: flex;

}

.btn li{

flex: 1;

color: #fff;

font-weight: bold;

line-height: 50px;

text-align: center;

font-family: "楷体";

cursor: pointer;

}

.btn .active{

background-color: rgba(0,0,0,0.2);

transition: all ease-in-out 0.25s;

}

JavaScript部分

window.onload=function(){

var lbimg=document.querySelector(".lbimg");

var lbimgs=lbimg.querySelectorAll("li");

var btn=document.querySelector(".btn");

var btns=btn.querySelectorAll("li");

for (var i = 0; i < btns.length; i++) {

btns[i].index=i;

btns[i].onclick=function(){

clearInterval(timer);

for (var j = 0; j < lbimgs.length; j++) {

lbimgs[j].className="";

}

// 按钮颜色跟着变化

for(var k=0;k<btns.length;k++){

btns[k].className="";

}

// 轮播同步,点击后图片的位置从点击的地方开始轮播

index=this.index;

btns[this.index].className="active";

lbimgs[this.index].className="on";

timer=setInterval(autoPlay,1000);

}

}

var index=0;

// 自动轮播

index++;

var timer=setInterval(autoPlay,1000);

function autoPlay(){

for (var i = 0; i < lbimgs.length; i++) {

lbimgs[i].className="";

}

for (var j = 0; j < btns.length; j++) {

btns[j].className="";

}

if(index==lbimgs.length-1){

index=0;

}else{

index++;

}

btns[index].className="active";

lbimgs[index].className="on";

}

// 鼠标移动时清除定时器

lbimg.onmouseover=function(){

clearInterval(timer);

}

lbimg.onmouseout=function(){

timer=setInterval(autoPlay,1000);

}

}

以上是 JavaScript实现轮播图效果代码实例 的全部内容, 来源链接: utcz.com/z/356199.html

回到顶部