这周至今完成了主页轮播图和底部导航小圆点的切换效果,用的原生js来写,可以方便控制一个轮播图的运动曲线效果,但是现在只是一个变减速运动方式。
首先为了书写的方便性先封装了一个$()函数来模仿JQ里面的获取id方式。
function $(id){
return document.getElementById(id);
}
获取轮播图的div之后就要改变其定位来实现轮播
轮播图的html部分为
<div class="slide w fl pr">
<ul class="h w inner pa" id="slide">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<i class="point pa ns" id="point">
<ul>
<li class="focus"><i>1</i></li>
<li><i>2</i></li>
<li><i>3</i></li>
<li><i>4</i></li>
<li><i>5</i></li>
</ul>
</i>
</div>
第一个ul包含轮播图,第二个ul包含的是下方的一个导航点,用一个新定义的i来承载
之后用js来填充轮播图的背景图片和轮播图的宽度
var SlideImg = $('slide').getElementsByTagName("li"); //定义SlideImg为一个NodeList
for (var a = 1; a <= SlideImg.length; a++){ //处理每个SlideImg的每个节点
var obj = SlideImg[a-1]; //定义到每一个li
obj.style.width = 100/6 + "%"; //根据轮播图的个数定义每个轮播图宽度
if(a == SlideImg.length){ //定义最后一张轮播图使前后连贯
obj.style.backgroundImage = "url(image/slideimg"+1+".png)"; //填充轮播图每个span背景
obj.style.width = $('slide').offsetWidth/SlideImg.length + "px";//避免因宽度不够而留出空白
}
else{ //填充每一个li的背景图片
obj.style.backgroundImage = "url(image/slideimg"+a+".png)";
}
}
再之后是用两个定时器来实现轮播图效果,同时轮播使用的是一个变减速运动的方式,让交互更加自然。
var slideNum = 0, move1 = null, move2 = null; //设置两个定时器来控制运动和自动换页
var PointList = $('point').getElementsByTagName("li"); //获取下方点的NodeList
function move(){ //开始移动
var a = 0,num = 0;
clearInterval(move1);
move1 = setInterval(moveUp,30);
function moveUp(){
if(a < 99.95){
num = a + (slideNum*100);
//console.log(a);
//console.log(num);
$('slide').style.left = "-"+num+"%";
//使a月激励目标位置速度越小,做减速运动
a += (100 - a)/10;
}
else{
clearInterval(move1);
if(slideNum == SlideImg.length - 2) {
slideNum = -1;
$('slide').style.left = "0";
}
slideNum += 1;
//console.log(slideNum);
$('slide').style.left = "-"+slideNum*100+"%";
//point对应轮播图
for (var j = 0; j < PointList.length; j++){
if(j == slideNum){
PointList[j].className = "focus";
}
else{
PointList[j].className = "";
}
}
a = 0;
}
}
}
move2 = setInterval(move,4000);
之后再加上每一个点对应一个li
var onFoc = 0;
var oFoc = null;
for (var i = 0; i < PointList.length; i++){
PointList[i].index = i;
PointList[i].onmouseover = function(){
for (var j = 0; j < PointList.length; j++){
PointList[j].className = "";
this.className = "focus";
}
}
PointList[i].onclick = function(){
clearInterval(move1);
clearInterval(move2);
var k = this.index;
var l = slideNum;
slideNum = k;
move2 = setInterval(move,4000);
onFoc = l*100;
clearInterval(oFoc);
oFoc = setInterval(function(){
onFoc += (100*k - onFoc)/10;
//console.log(slideNum);
//console.log(Math.abs(onFoc-k*100));
if(Math.abs(onFoc-k*100) < 0.05){
onFoc = Math.round(onFoc);
$('slide').style.left = "-"+onFoc+"%";
clearInterval(oFoc);
}
else{
$('slide').style.left = "-"+onFoc+"%";
}
},10);
}
}
现在的工作大概这么多,之后的时间需要补上一些注释以及改进一些细节的调整。