js实现无缝连接轮播图(二)实现自定义属性,根据banner图片的数量动态生成小圆点
<!-- 这个animate.js 必须写到 index.js的上面引入 -->
<script src="js/animate.js"></script>
<!-- 引入我们首页的js文件 -->
<script src="js/index.js"></script>
HTML代码
------------------------------------------------------
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
<
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> </a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆点 -->
<ol class="circle">
</ol>
</div>
------------------------------------------------
js代码
----------------------------------------------------------------------
window.addEventListener(‘load’,function(){
//1、获取元素
var arrow-l = document.querySelector(‘.arrow-l’);
var arrow-r = document.querySelector(‘.arrow-r’);
var focus = document.querySelector(‘.focus’);
var focuwidth = focus.offsetWidth;
focus.addEventListener(‘mouseenter’,function(){
arrow-l.style.display = ‘block’;
arrow-r.style.display = ‘block’;
});
focus.addEventListener(‘mouseleave’,function(){
arrow-l.style.display = ‘none’;
arrow-r.style.display =‘none’;
});
//2、动态生成小圆点
var ul = focus.querySelector(‘ul’);
var ol = focus.querySelector(‘ol’);
for(var i = 0;i<ul.children.length;i++){ //使用for循环,根据banner图片的数量生成li小圆点的数量
var i = document.createElement(‘li’);
li.setAttribute(‘index’,i);
ol.appendChild(li);
}
})