前端学习时间不长,最近看完了第一遍高设,想着试着写一点东西,于是有了这个还不算好的轮播效果。(学习出处为慕课网)
实现过程
首先,应该清楚将要实现的功能,我实现的功能主要为:
- 鼠标滑过图片时左右两边的箭头出现,并且鼠标放在箭头上时箭头透明度降低
- 点击左右箭头实现图片无限轮播
- 图片下方圆点按钮会随着图片轮播而变化
- 点击任意圆点按钮,图片能正确定位到相关位置
- 鼠标移出图片时,图片按照一定时间间隔自动轮播,鼠标放入图片时,暂停自动播放
接下来就是实现各个功能:
1、鼠标滑过效果
鼠标滑过效果可以直接通过伪类选择符hover实现
.arrow{
cursor: pointer;//鼠标放入箭头时显示为小手的形状
display: none;//鼠标未滑入图片时,不显示效果
line-height: 40px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;
position: absolute;//说明以父容器为定位基准
z-index: 2;//此标签说明本部分与其他部分相比更靠近人
top: 180px;background-color:#000;
opacity: 0.3; //设置箭头出现的透明度
color:#fff;
}
在鼠标滑过箭头时只需要改变箭头的透明度
.arrow:hover{
opacity: 0.7;
}
由于之前定义了display: none;
,所以现在要将其显示出来
#carousel:hover .arrow{
display: block;
}
2、点击箭头实现轮播
通过观察控制台可以发现,在进行图片轮播时,改变的其实是图片left:00px
的值,也就是说只要能有一个函数,在鼠标点击箭头时准备定位此时图片的left值,就能实现图片的切换。
function animate(offset){
var left = parseInt(picture.style.left) + offset;
picture.style.left = left + 'px';
}
next.onclick = function() {
animate(-600px);//点击右箭头
}
prev.onclick = function() {
animate(600px);//点击左箭头
}
但是上述方法不能实现无限滚动的效果,也就是说鼠标一直往一个方向点击时,会出现空白页,所以进行以下优化:
在图片轮播到第一张后再次点击箭头,图片的left值将会变大,也就是说如果想要从第一张跳转到最后一张,可以加上最后一张的附属图,并将它的left值变为最后一张图的left值,从而实现跳转。
function animate(offset){
var left = parseInt(picture.style.left) + offset;
if (left >-600) {
picture.style.left = -3000 + 'px';
}
if (left <-3000) {
picture.style.left = -600 + 'px';
}
}
3、点击圆点按钮实现图片切换
每一个按钮都设置了一个index值,用来显示图片序号。首先要实现圆点点亮功能。
在css定义了一个圆点亮起的效果:
#button .on{
background: #fff;
}
定义一个方法来点亮圆点:
function showbutton(){
for (var i = 0; i<button.length; i++) {//遍历圆点
if (button[i].className == 'on') {//如果遍历到的圆点亮着,则去掉,防止圆点一起亮起
button[i].className='';
break;
}
}
button[index-1].className='on';//将当前按钮变为亮着
}
prev.onclick=function(){
if (index == 1) {//如果没有此判断,index值将会一直减小,如果当前index为1,说明是第一个按钮,下一个按钮的index值为5
index = 5;
}
else{
index -= 1;
}
showbutton();
animate(600);
}
现在要实现圆点按钮的任意切换,此时图片切换的原理与上述箭头切换一样,都是通过偏移量来进行切换,此时是通过index的值进行切换。
for (var i = 0; i < button.length; i++) {
button[i].onclick = function(){
if (this.className == 'on') {
return;//跳出函数,当点击当前页面的按钮时,不进行for循环
}
var newindex = parseInt(this.getAttribute('index'));//获取目标值
var offset = -600 * (newindex - index);
animate(offset);
index = newindex;
showbutton();//点击后需要显示按钮
}
4、设置图片切换速度,CSS3有一个过渡属性transition属性,但这个属性不能用在这里,试过之后可以发现图片切换的顺序实际上是123454321,而我们要的效果是1234512345,所以这里需要使用js。本效果使用setTimeout()
方法来实现,每隔10ms,执行一次go()
。
function animate(offset){
if(offset == 0){
return;
}
animated = true;
var time =300;
var interval = 10;//图片切换一下的时间
var speed = offset/(time/interval);//设置图片的切换速度
var left = parseInt(picture.style.left) + offset;
var go = function(){
if ((speed > 0 && parseInt(picture.style.left) < left) || (speed < 0 && parseInt(picture.style.left) > left)) {
picture.style.left = parseInt(picture.style.left) + speed +'px';
setTimeout(go,interval);
}
else{
picture.style.left = left +'px';
if(left>-200){
picture.style.left = -600 * len + 'px';
}
if (left<(-600 *len)) {
picture.style.left = '-600px';
}
animated = false;
}
}
go();
}
5、实现自动切换
自动切换使用了定时器,在一个时间间隔里,执行点击右箭头的方法。
function play(){
var timer = setTimeout(function(){
next.onclick();
play();
},interval);
}
在鼠标放在图片上时,自动切换暂停,因此需要清楚定时器。
function stop(){
clearTimeout(timer);
}
最后通过以下方式,实现此功能:
carousel.onmouseover = stop;
carousel.onmouseout = play;
play();
学习心得
虽然成功实现了轮播效果,但是在代码优化上还有很多需要改进的地方。目前还处于前端小白阶段,希望在接下来的学习中能有所提高。
(本文可能存在很多漏洞,希望众大神能批评指出,感谢!)
个人主页
网友评论