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">
<
</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);

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

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

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

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

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

  }

  this.className = 'current’;

  })

}

  ol.children[0] = 'current’;

})

(0)

相关推荐

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

    <!-- 这个animate.js 必须写到 index.js的上面引入 --> <script src="js/animate.js"></scri ...

  • WEB前端第四十五课——jQuery框架(三)animate、轮播图&百叶窗案例

    WEB前端第四十五课——jQuery框架(三)animate、轮播图&amp;百叶窗案例

  • 利用js和jquary制作轮播图

    利用js和jquary制作轮播图

  • android 轮播图

    不点蓝字,我们哪来故事? 国庆节前,教大家一步步搞回了两步路(户外助手)的 谷歌卫星图 和 路网. 错过的朋友可以看之前的文章:快速找回 两步路(户外助手) 的谷歌卫星图&路网 但是文章发出后 ...

  • 通过Swiper网站使用轮播图的切换效果

    这里写目录标题 通过Swiper网站使用轮播图的切换效果 1.通过网络地址引入或者下载到本地 2.写入html结构 3.设置复盒子宽高 4.写入轮播图切换效果的方法 通过Swiper网站使用轮播图的切 ...

  • PPT展示多图怎么办?试试轮播图效果

    @三水 hello,大家好,这里是珞珈老师,我是三水. 要展示多张图片的时候,很多同学不知道该怎么处理,觉得无论怎么排都不好看. 这个时候你可以尝试做一个轮播图效果,可以帮助你解决多图展示排版难题. ...

  • 两种轮播图实现方式

    最近做了一个网站,首页轮播图一直没有达到理想的效果,在网上找了两个实现方法,一个是用css自己实现,一个是用swiper插件,个人认为swiper做的还比较好用.这里只贴出主要的实现代码,想要看具体实 ...

  • JavaScript 移动端轮播图

    代码实现: mobileAutoPlay.html(复制并保存为html文件,打开并切换为移动端显示,即可见效果): <!DOCTYPE html> <html lang=" ...

  • JavaScript轮播图

    要求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理 图片播放的同时,下面小圆圈模块跟随一起变化 点击小圆圈,可以播放相应图片 鼠标不 ...