230问答网 > 向左滑动js焦点图原理

向左滑动js焦点图原理

2025-01-07 09:51:55

推荐回答（3个）

回答1：

图片画的有点儿简陋，大致呢就是讲：

1、红框为一个容器DIV，overflow:hidden;

2、容器里边有三个横向排列的图片，可以用UL>LI来做。由于容器的OVERFLOW所以2和3是看不见的。

3、下图，调整容器里边元素（如UL）的左外边距为负值，达到图二的效果。

4、之后就是要把1给放到3的后边去，为什么呢？答：为了循环滚动。

5、但是，如果1放到3后边，而UL的左外边距还是负值会出现什么情况呢？答：容器里边显示的3。所以还在把1放到3后边的同时，把UL的左外边距调零。

大致就这个思路吧，做着试试呗！

回答2：

下面这种是通过一个改变ul的margin-left实现平滑的轮换，在滑动后把margin-left还原为0并改变ul下li队列的书序，实现图片的切换。当没有触发点击事件时会有一个定时的后自动执行的方法。

<<<<<<<
---------
>>>>>>>

$(function(){
$("#main ul").css({"width":$("#main ul li").length*1000,"margin-left":-1000});//定义css
defaultime = setInterval(action,4000);//定时
//定义动作
function action(action){
if(action == 'L'){//向左
$('#main ul').stop().animate({marginLeft:-2000},1000,function(){//定义滑动效果
$('#main ul').css('margin-left',-1000);//滑动后改变margin-left为-1000(复位)
$('#main ul li:first').appendTo($('#main ul'));//ul下的li的第一个置于最后
});
}else{//向右
$('#main ul li:last').prependTo($('#main ul'));//将ul下的最后一个li置于第一个
$('#main ul').stop().animate({marginLeft:0},1000,function(){//定义滑动效果
$('#main ul').css('margin-left',-1000);//滑动后改变margin-left为-1000(复位)
});
}
}
//下面调取上面设定好的动作
//触发动作上一张
$("#prv").click(function(){//点击触发
clearInterval(defaultime);//清除定时
action("L");//调取向左滑动
defaultime = setInterval(action,4000);//继续定时
});
//触发动作下一张
$("#next").click(function(){//点击触发
clearInterval(defaultime);//清除定时
action("R");//调取向右滑动
defaultime = setInterval(action,4000);//继续定时
});
});

回答3：