JavaScript基础 -- 焦点图轮播(转载)

原理效果

金沙官网线上 1

 

金沙官网线上 2

然后将 css 中视窗容器的 overflow: hidden;重新添加即可

金沙官网线上 3 

金沙官网线上 4

 

参考视频:http://www.imooc.com/learn/18

其他

设置自动轮播,并添加鼠标 hover 事件
mouseover 时:停止自动轮播
mouseout 时:重新开始自动轮播

接着实现平滑切换的效果,之前已经实现的效果是直接切换,而我们想要的是能够平滑过渡,体验会好一些。主要实现方法是通过定时器 setTimeout。设置切换需要的总时间,每次间隔多少时间,然后求出每次切换过渡的位移量,判断是否到达目标值,若否,则继续执行定时器进行位移。 还有一点就是,如果连续点击切换按钮,图片会立刻不停地切换, 但我们想要的效果是等当前图片切换完成之后再进行下一次切换,这个可以优化一下。最后实现自动播放效果,当鼠标不点击时,它能自动播放,这里用到 setInterval定时器,每次3秒执行一次点击事件,而当鼠标移上去的时候清除该事件,离开的时候又自动播放。OK,整理一下代码:

Github 源码

Demo

样式不难,主要就是根据实际情况修改一下图片尺寸就行了。因为图片组都左浮动,所以宽度远远大于父容器的宽度,如果没有设置overflow: hidden; 效果就是这样子:

以面向对象的方式实现无线轮播效果组件
预览地址:https://evenyao.github.io/carousel-jQuery/金沙官网线上,

设置CSS样式

逻辑图

我们的demo轮播为四张图,如有多张图,逻辑是一样的

当初始化之前,CSS中如果撤除 overflow: hidden; ,即可看到该样式,即四张图排列在一起(此时容器的宽度已经通过JS计算得到)

  • 初始化之后,在第1张图之前添加一张图4,在第4张图之后添加一张图1(即最后一张图添加第一张图,第一张图添加最后一张图)
  • 当 nextBtn 被点击的时候,向右移
  • 但当 next 到最后一张图片时,下面已经没有图片了,所以此时作一个判断操作,当判断到达最后一张图片的时候,将整体全部左移,并将原始的第一张图片放到视窗的位置,如图所示
  • 当 preBtn 被点击的时候,向左移
  • 当 pre 到第一张图片时,与上同理,如图所示

 

金沙官网线上 5

 

 

这样就能简单的实现了切换效果,但是当切换到最后一张再向右切换时就会出现上面所讲的空白的现象,所以呢,就需要通过判断list的left值如果 大于-600(-600是默认设置的,为了显示第一张图片[1.jpg])就将其设置为-3000,如果小于-3000,就将其设置为-600,这样就能 实现无线滚动了,但是又会发现当图片切换滚动的时候,小按钮并没有跟着改变,这时我们就需要通过一个index值(默认为1)来索引当前是哪个小按钮被选 中,并为其添加.on的类,在添加之前需要将原先有.on的小按钮的class移除掉,最后一点是由于小按钮只有五个,想要实现无限切换,就需要判断边界 值,当index为1时,如果还想往左切换的话,就将其设置为5,这样就会回到第五个小按钮上,其他同理。

好了,最重要的还是JS实现轮播效果:

金沙官网线上 6

最外层div就是容器啦,然后其子元素分别就是存放图片的id为list的div,存放小圆圈按钮的id为buttons的div,最后两个a标签 就是左右切换的按钮。还有一个问题需要注意,此焦点图轮播器其实只有五张图,但是在id为list的div里却放了七张图,这是为啥呢?其原理是: 第一张图片(5.jpg)和最后一张图片(1.jpg)的作用是为了实现无限滚动的效果,因为此效果是通过设置id为list的div容器的left值来 实现图片切换的,所以当轮播到第五张图片(5.jpg)的时候,再进行向右切换的时候,这时最后一张图片被切换进来,此时left值已经为 -3600px,并且同时我们又将其left值改为-600px,这样就回到了真正的第一张图。由于最后一张图片就是第一张图片(1.jpg),所以用户 肉眼看上去没有什么变化,就这样实现了无限滚动的效果,其他同理!那么如果没有那两张图片作为过渡的话,效果就会是这样,当轮播到最后一张的时候会闪一下 就没有了:

*{ 
    margin: 0;
    padding: 0; 

}
a{
    text-decoration: none;
}
body { 
    padding: 20px;
}
#container { 
    width: 600px;     /*这里600x400是图片的宽高*/
    height: 400px; 
    border: 3px solid #333; 
    overflow: hidden;   /*隐藏溢出的图片,因为图片左浮动,总宽度为4200*/
    position: relative;
}
#list { 
    width: 4200px;   /*这里设置7张图片总宽度*/
    height: 400px; 
    position: absolute;  /*基于父容器container进行定位*/
    z-index: 1;
}
#list img { 
    float: left;
}
#buttons { 
    position: absolute; 
    height: 10px; 
    width: 100px; 
    z-index: 2;   /*按钮在图片的上面*/
    bottom: 20px; 
    left: 250px;
}
#buttons span { 
    cursor: pointer; 
    float: left; 
    border: 1px solid #fff; 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background: #333; 
    margin-right: 5px;
}
#buttons .on {  
    background: orangered;   /*选中的按钮样式*/
}
.arrow { 
    cursor: pointer; 
    display: none;    /*左右切换按钮默认先隐藏*/
    line-height: 39px; 
    text-align: center; 
    font-size: 36px; 
    font-weight: bold; 
    width: 40px; 
    height: 40px;  
    position: absolute; 
    z-index: 2; 
    top: 180px; 
    background-color: RGBA(0,0,0,.3); 
    color: #fff;
}
.arrow:hover { 
    background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow { 
    display: block;   /*当鼠标放上去容器上面就显示左右切换按钮*/
}
#prev { 
    left: 20px;
}
#next { 
    right: 20px;
}

本文由金沙官网线上发布于Web前端,转载请注明出处:JavaScript基础 -- 焦点图轮播(转载)

您可能还会对下面的文章感兴趣: