html 动态tab添加图片轮播,js让页面动起来

图片轮播

此处图片轮播原理：在container元素中水平放入图片，通过overflow属性将超出部分隐藏，然后通过js控制图片组left值达到轮播效果。

实现的html结构如下图：

实现js控制动画原理如下图：

编写相应的函数之前我们应该知道

我们为菜单栏加入了相应的index属性，与tab选项卡的ind属性相似，我们可以通过index找到我们想要的图片的位置

我们的play函数是前面的moveStart函数和showTab函数的结合，我们通过传入的i*图片长度计算要到达的图片的位置，通过为当前元素赋予select类名改变样式

值得注意的是我们这里采用了与showTab函数不同的处理方法，我们加入了一个变量select记录上一次改变样式的选项，取代了之前的遍历所有选项改变类名的方式

与自动切换的tab选项卡相同，在鼠标滑过菜单事件时我们清除定时器，当滑出时我们以滑出的li的index属性为参数传入auto使其开始轮播

function auto(start){

clearInterval(autotimer);

var i = start;

autotimer=setInterval(function(){

console.log(i);

play(i);

i++;

if(i == img.length)

{

i=0;

}

},3000);

}

function play(i){

clearInterval(timer);

var target=-i * 490;

menu_li[select].className='';

select=i;

menu_li[select].className='select';

timer=setInterval(function(){

var speed= (target - pic.offsetLeft )/10;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(pic.offsetLeft == target)

{

clearInterval(timer);

}

pic.style.left=pic.offsetLeft+speed+'px';

},20);

}

请大家参考我给出的play函数，自己动手写出一个play函数,再考虑能否进一步完善play函数呢？