标签：function ol 轮播 js className ul lis var
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
width: 665px;
height: 442px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
ul {
width: 665px;
height: 442px;
position: relative;
}
ul>li {
width: 665px;
height: 442px;
position: absolute;
left: 0;
top: 0;
display: none;
}
ul>li.active {
display: block;
}
ol {
width: 100px;
height: 14px;
position: absolute;
left: 50%;
margin-left: -50px;
bottom: 20px;
}
ol>li {
width: 14px;
height: 14px;
float: left;
margin: 0 3px;
border-radius: 50%;
background-color: #fff;
}
ol>li.active {
background-color: #f00;
}
a {
color: #eee;
width: 30px;
height: 60px;
font-size: 20px;
line-height: 60px;
text-align: center;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 191px;
}
a.prev {
left: 0;
}
a.next {
right: 0;
}
a:hover {
background-color: #000;
}
</style>
<div>
<ul>
<li class="active"><img src="img/1.jpeg" /></li>
<li><img src="img/2.jpeg" /></li>
<li><img src="img/3.jpeg" /></li>
<li><img src="img/4.jpeg" /></li>
<li><img src="img/5.jpeg" /></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<a class="prev" href="javascript:;"><</a>
<a class="next" href="javascript:;">></a>
</div>
<script type="text/javascript">
//因为鼠标移入我里面我需要停止动画 所以获取一下div
var div = document.getElementsByTagName("div")[0];
//获取按钮 图片 点点点
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];
var ul_lis = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var ol_lis = document.getElementsByTagName("ol")[0].getElementsByTagName("li");
var timer = null; //全局
var n = 0; //声明一个变量用来记录你当前是在第几张图
//下一个
next.onclick = function() {
loopBanner(1, ul_lis.length, 0)
}
//上一个
prev.onclick = function() {
loopBanner(-1, -1, ul_lis.length - 1)
}
//下面点点点
for(var i = 0; i < ol_lis.length; i++) {
//给每一个点点点定义一个自定义属性名为index
ol_lis[i].index = i;
ol_lis[i].onclick = function() {
for(var j = 0; j < ol_lis.length; j++) {
ol_lis[j].className = "";
ul_lis[j].className = "";
}
//点击哪个点点点 哪个点点点变色
this.className = "active";
//与点点点对应的图片显示
ul_lis[this.index].className = "active";
//让左右按钮和点点点进行关联
n = this.index;
}
}
//自动轮播
timer = setInterval(function() {
//下一个的代码
loopBanner(1, ul_lis.length, 0);
}, 1000)
//鼠标移入清除定时器
div.onmouseenter = function() {
clearInterval(timer);
}
//鼠标移出再度开启定时器
div.onmouseleave = function() {
timer = setInterval(function() {
//下一个的代码
loopBanner(1, ul_lis.length, 0);
}, 1000)
}
//把下一张和上一张封装成一个函数
function loopBanner(val, limit, target) {
n = n + val;
if(n === limit) {
n = target;
}
//先把所有的图片和点点点清空
for(var i = 0; i < ul_lis.length; i++) {
ul_lis[i].className = "";
ol_lis[i].className = "";
}
ul_lis[n].className = "active";
ol_lis[n].className = "active";
}
</script>
标签：function,ol,轮播,js,className,ul,lis,var 来源： https://www.cnblogs.com/xuyx/p/10600448.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。