简易js轮播图(带注释简单易懂)

Html

Css

            * {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
.wrap {
	width:500px;
	height:300px;
	margin:100px auto;
	position:relative;
}
.wrap:hover .btn {
	display:block;
}
.list {
	width:100%;
	height:100%;
	position:relative;
}
.item {
	position:absolute;
	transition:all .8s;
	opacity:0;
}
.item.active {
	z-index:100;
	opacity:1;
}
.btn {
	width:30px;
	height:60px;
	font-size:30px;
	opacity:.5;
	border:none;
	position:absolute;
	top:120px;
	z-index:1000;
	cursor:pointer;
	display:none;
}
#right {
	right:0;
}
#left {
	left:0;
}
.pointList {
	position:absolute;
	right:20px;
	bottom:20px;
	z-index:10000;
}
.point {
	width:8px;
	height:8px;
	background-color:#969595;
	border:1px solid #000000;
	float:left;
	margin-right:8px;
	border-radius:100%;
	cursor:pointer;
}
.point.active {
	background-color:white;
}

var wrap = document.getElementsByClassName("wrap");
var items = document.getElementsByClassName("item"); //图片
var points = document.getElementsByClassName("point") //点
var left = document.getElementById("left"); //左按钮
var right = document.getElementById("right"); //右按钮

var index = 0; //记录在播放哪张图
var num = 0; //重新定义定时器时间

var goLeft = function() { //左按钮函数
    if (index > 0) { //当index大于0时就减1
        index--;

} else {
        index = 4; //小于0就直接跳到最后一张
    }
    goindex(); //跳转
}

left.onclick = function() { //点击左按钮
    goLeft(); //调用左按钮函数 
    num = 0; //重置定时器时间
}
var goRight = function() { //右按钮函数
    if (index < 4) { //index小于4就加1
        index++;
    } else {
        index = 0; //大于4就直接跳到第1张图片
    }
    goindex() //跳转
}

right.onclick = function() { //点击右按钮
    goRight(); //调用右按钮函数
    num = 0; //重置定时器时间
}
for (var i = 0; i < points.length; i++) { //点击小点跳转
    points[i].onclick = function() { //遍历所有的点添加点击事件
        var pointIndex = this.getAttribute("data-index"); //点击哪个点就返回哪个数（在HTML里定义值）用pointIndex变量接收
        index = pointIndex; //将pointIndex赋值给index
        goindex() //跳转
        num = 0; //重置定时器时间
    }
}
colse = setInterval(function() { //轮播图定时器
    num++; //每次执行定时器num就加1
    if (num == 4) { //当num=40时(表示过了4s)
        goRight() //跳转
        num = 0; //重置定时器时间
    }

}, 1000) //每1s执行一次定时器
wrap[0].onmouseover = function() { //鼠标移入停止定时器
    clearInterval(colse);
}
wrap[0].onmouseout = function() { //鼠标移出启动定时器
    colse = setInterval(function() {
        num++;
        if (num == 4) {
            goRight()
            num = 0;
        }

}, 1000)
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简易js轮播图(带注释简单易懂)

代码描述：1.可调速。2.鼠标移入暂停轮播

更新时间：2020-07-28 11:15:09
javascript备注写的很详细，仔细看然后理清逻辑很快就可以学会了。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

1

相关代码

简易js轮播图(带注释简单易懂)

最新