js实现无缝连接轮播图（一）获取左右箭头，实现显示隐藏左右箭头

 

<!-- 这个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">
&lt;
</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’;

});

 

})