原生js实现焦点轮播图动态切换
已经学了一段时间的JavaScript,正好可以给之前写过的html静态的页面文件添加一些动态的效果,丰富一下。当然最初也会参考他人的写法,下面就博主自己在敲代码的过程描述,初学者能力有限,欢迎大牛来喷~~
- 左右箭头点击切换
- 小圆点点击切换
- 箭头和小圆点交替切换
- 暂未实现定时切换
<div id="center">
<div id="list" style="left:0px;">
<a href="#"><img src="" alt=""/></a>
<a href="#"><img src="" alt=""/></a>
<a href="#"><img src="" alt=""/></a>
<a href="#"><img src="" alt=""/></a>
<a href="#"><img src="" alt=""/></a>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
<div id="dot">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
</div>
首先是页面文件布局,结构的话,先是用一个大的容器包裹,里面分三部分,第一部分就是我们的图片模块,第二部分是图片两边的左右箭头,第三部分就是下面的点击切换以及显示状态的小圆点。
#center{width: 760px; height: 380px; position: relative;overflow: hidden;}
#center:hover a.arrow{display: block;}/*鼠标滑过图片显示左右箭头*/
#list{width: 3800px; height: 380px; position: absolute;}
#list img{float: left;}
.arrow{position: absolute;top: 160px; font-weight: bold; display: none; width: 50px;height: 50px;
color: #fff; background: #ccc; z-index:3;text-align: center; overflow: hidden; line-height: 50px; font-size: 50px; cursor: pointer;}
#prev{left:20px;}
#next{right:20px;}
.arrow:hover{background: #aaa;}
#dot{position: absolute; bottom: 10px; left: 50%; margin-left: -35px;}
#dot span{background: #ccc; border-radius:50%; cursor: pointer; display: inline-block; width: 14px; height: 14px;}
#dot .on,#dot span:hover{background: #666;}
css样式参考
注意:这里的尺寸都是根据自己的图片大小设定的,你可以自行设置。这里暂不讨论图片加载的数量以及大小问题。
页面结构清楚了,下面就是我们就步入正题了。
var list = document.getElementById('list');
var dots = document.getElementById('dot').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
首先我们需要获取到图片对象、小圆点对象以及左右箭头。
function animate(offset){
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft +'px';
if(newLeft>0){
list.style.left = -3040 +'px';
}
if(newLeft<-3040){
list.style.left = 0+'px';
}
list.style.transition = '1s'; //过渡效果
}
定义一个图片切换函数,原理是根据判断改变图片的绝对定位。
function showDot(){
for(var i=0;i<dots.length;i++){
if(dots[i].className == 'on'){
dots[i].className = '';
break;
}
}
dots[index-1].className = 'on';
}
这是小圆点的显示与切换函数。先遍历小圆点,把类名为on的小圆点的类改为空。
/**
* 右箭头的点击切换
*/
next.onclick = function(){
if(index==dots.length){
index=1;
}else{
index = index+1;
}
animate(-760);
showDot();
}
/**
* 小圆点的点击切换
* 注意,myIndex取出来的自定义属性index是字符串型,而不是数字型,要做转换。
*/
for(var i=0;i<dots.length;i++){
dots[i].onclick = function(){
if(this.className=='on'){
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -760*(myIndex-index);
animate(offset);
index = myIndex;
showDot();
}
}
index是在html里给小圆点加的一个自定义属性,用于判断小圆点的索引值。
遇到的问题
1.因为是固定的图片数量和尺寸,所以在判断的时候也需要计算好
2.在if里面做判断是==,执行语句里的赋值是=,很容易因为不小心出错
3.获取索引值index的时候,虽然我们看到的是数字,但其实是字符型,要做转换,我开始遇到这个问题的时候困住了好久,然后各种Google,最后恍然大悟,所以细心很重要!!!