模仿js轮播

最新推荐文章于 2024-07-16 16:43:05 发布

dengfu6298

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mxblogs/p/11555270.html

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="关键字">
<meta name="description" content="简介">

<title>slide</title>

//每隔3000毫秒更换一次

//定义变量保存
var n = 0;

//获取li
var carousel = document.getElementById("carousel");
var carouselLi = carousel.getElementsByTagName("li");

//获取P
var radius = document.getElementById("radius");
var boxpele = radius.getElementsByTagName("p");

//获取slide框
var carousel = document.getElementById("carousel");

//获取上下按钮
var next = document.getElementById("next");
var prev = document.getElementById("prev");

//为slide注册鼠标移入事件关闭计时器
carousel.onmouseover = function(){
clearInterval (timer);

//按钮显示
next.style.display = "inline-block";
prev.style.display = "inline-block";
}
//移出开启计时器
carousel.onmouseout = function(){
timer = setInterval(carouseldown,3000);

//按钮隐藏
next.style.display = "none";
prev.style.display = "none";
}

//点击prev向下运动
prev.onclick = carouseldown;
//点击next向上运动
next.onclick = carouselup;

//给每个P标签注册点击事件
for(var a = 0; a<boxpele.length;a++){

//建立对应关系
boxpele[a].b = a;

boxpele[a].onclick = function(){
//解决点击后移除的bug
n = this.b
//先清除所以显示的内容
for (var i = 0; i < carouselLi.length; i++) {
carouselLi[i].className = "";
boxpele[i].className = "";
}

//再把当前的内容显示
carouselLi[this.b].className = "active";
boxpele[this.b].className = "active";
}
}

//定义计时器
var timer = setInterval(carouseldown,3000);

//定义<向下运动
function carouseldown(){
//通过n递增变化内容
n++;
//判断n的值，达到循环显示的效果
if (n == carouselLi.length) {
n = 0;
}

//先清除所以显示的内容
for (var i = 0; i < carouselLi.length; i++) {
carouselLi[i].className = "";
boxpele[i].className = "";
}

//再把当前的内容显示
carouselLi[n].className = "active";
boxpele[n].className = "active";
}
//定义>向上运动
function carouselup(){
//通过n递增变化内容
n--;
//判断n的值，达到循环显示的效果
if (n < 0) {
n = carouselLi.length - 1;
}

//先清除所以显示的内容
for (var i = 0; i < carouselLi.length; i++) {
carouselLi[i].className = "";
boxpele[i].className = "";
}

//再把当前的内容显示
carouselLi[n].className = "active";
boxpele[n].className = "active";
}

</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

转载于:https://www.cnblogs.com/mxblogs/p/11555270.html

dengfu6298

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿js轮播

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev...
复制链接

扫一扫