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" ></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" ></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" ></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" ></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);

//3.在小圆点生成的同时,用排他思想并且绑定点击事件实现颜色填充的切换

  li.addEventListener(‘click’,function(){ //再点击事件里使用for循环的排他思想

  //清除掉所有li里面的current

  for(var i = 0;i<ol.children.length;i++){

    ol.children[i].className = ‘’;

  }

  this.className = ‘current’;

  var index = this.getAttribute(‘index’);  //声明一个变量,存储点击获得的自定义的属性

  animate(ul, -index*focusWidth); //调用动画函数,传入实参ul,移动的距离是小圆点的索引*图片的宽度(必须是负值);

  })

}

  ol.children[0] = ‘current’;

 

})

js实现无缝连接轮播图(四)点击小圆点,移动图片

上一篇:174 01 Android 零基础入门 03 Java常用工具类02 Java包装类 02 包装类学习 03 基本数据类型和包装类之间的转换


下一篇:flutter——android报错建议Suggestion: add 'tools:replace="android:label"'