讲到用原生js实现轮番图,就得说道运动。当然直接用定时器,改变ul的left也可以,但是要是想看起来有点动画的效果,出去css的动画实现,如果要用js的 话,就得说到运动,下面先来说一下变速运动
function animateBuffer(ele,obj,speedTime,callback){//funciton(){}
if(speedTime == "slow"){
speedTime = 100;
}else if(speedTime == "quickly"){
speedTime = 50;
}else if(speedTime == "fast"){
speedTime = 10;
}else if(speedTime == undefined){
speedTime = 20;
}
clearInterval(ele.timer);
ele.timer = setInterval(function(){
var flag = true;//控制所有属性都到目标值。
var current = 0;
/*
* obj = {
height : "300",
width : "500",
opacity : 20
}
*/
for(var attr in obj){
if(attr == "opacity"){
current = getStyle(ele,attr)*100;
}else{
current = parseInt(getStyle(ele,attr));
}
var speed = (obj[attr] - current)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(Math.abs(obj[attr]-current) >= speed+0.1){//停止条件处理
//如果属性还没有到目标值
//把flag变成false
flag = false;
}
if(attr == "opacity"){
current += speed;
ele.style[attr] = current/100;
}else if(attr == "zIndex"){
ele.style[attr] = obj[attr];
}else{
ele.style[attr] = current + speed + "px";//
//console.log(ele.style[attr],target - current,target,current,speed);
}
}
//当所有的属性都到了目标值后清除定时器
if(flag){
ele.style[attr] = obj[attr] + "px";
clearInterval(ele.timer);
if(callback){
callback();
}
}
},speedTime);
}
//跨浏览器获取外部css样式
function getStyle(ele,attr){
return window.getComputedStyle ? window.getComputedStyle(ele,false)[attr] : ele.currentStyle[attr];
}
上面的代码只是实现运动也就是简单动画的效果 .原理也不难,就是县创建一个函数,里面传递参数,要实现动画效果胡元素,要改变胡值,包括宽高等等,还有就是改变值胡速度,回调函数,这里面改变的值需要以对象的形式传递。其他地方可以自己研究,其实就是一些条件的判断以及实现。
接下来是实现轮番图的js代码
<script type="text/javascript">
var img_list=$id("img-list");
var bannerli=img_list.children;
var index=0;
var timer=null;
var banner_nav=$id("banner-nav-list");
var bannerList=banner_nav.children;
var banner=$id("banner");
var arr=$id("arr");
var timer=null;
var toLeft=$id('toLeft');
var toRight=$id("toRight");
timer=setInterval(autoplay,2000);
function autoplay(){
if(index>=bannerli.length-1){
index=1;
img_list.style.left=0;
}else {
index++;
}
animateBuffer(img_list,{left:-index*810})
for(var i=0;i<bannerList.length;i++){
bannerList[i].className="";
}
bannerList[index>bannerList.length-1?0:index].className="active";
}
banner.onmouseover=function(){
animateBuffer(arr,{opacity:100});
clearInterval(timer);
}
banner.onmouseout=function(){
timer=setInterval(autoplay,1000);
animateBuffer(arr,{opacity:0});
}
toLeft.onclick=function(){
index--;
if(index<0){
index=0;
}
animateBuffer(img_list,{"left":-index*810});
for(var i=0;i<bannerList.length;i++){
bannerList[i].className="";
}
bannerList[index>bannerList.length-1?0:index].className="active";
}
toRight.onclick=function(){
index++;
if(index>bannerList.length-1){
index=bannerList.length-1;
}
animateBuffer(img_list,{"left":-index*810});
for(var i=0;i<bannerList.length;i++){
bannerList[i].className="";
}
bannerList[index>bannerList.length-1?0:index].className="active";
}
for(let i=0;i<bannerList.length;i++){
bannerList[i].onmouseover=function(){
bannerList[i].className="";
index=i-1;
this.className="active";
autoplay();
}
}
</script>
其实这段的实现也很简单,一步一步来,分部实现就可以
第一步:首先需要让图片能够动起来,那就要改变ul的left值,可以首先定义一个index值为0,然后通过定时器让index增加,同时ul的left值每次都要改变li 的大小乘以index的距离,这个时候要判断index的值,它不能超过li的length-1的长度
第二部:实现鼠标移入移出箭头显示和隐藏,这个可以根据自己写的css样式来改变,可以用display,也可以用opacity
第三步:实现图片右下角的小图片根据大图的移动来移动,这个也可以用index,条件判断处理好就可以了
第四步:实现鼠标移入到小图标上时大图显示相应的图片。
以上是我实现的轮番图,可能会有很多的不足,欢迎大家指!!!