向左滑动js焦点图原理

我想自己学着做一个js实现的那种像做滑动的或者像又滑动的焦点图,,但是我不知道原理什么?我只想要思路,不要源码,忘大神指点... 我想自己学着做一个js实现的那种像做滑动的或者像又滑动的焦点图,,但是我不知道原理什么?我只想要思路,不要源码,忘大神指点 展开
 我来答
zhangjingkang
推荐于2016-05-07 · TA获得超过165个赞
知道小有建树答主
回答量:134
采纳率:0%
帮助的人:96.7万
展开全部

图片画的有点儿简陋,大致呢就是讲:

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

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

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

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

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


大致就这个思路吧,做着试试呗!

千锋教育
2015-08-31 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
展开全部

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


<div id="main">
<ul>
<li><img src="1.jpg" width="1000" height="700"/></li>
<li><img src="1.jpg" width="1000" height="700"/></li>
<li><img src="1.jpg" width="1000" height="700"/></li>
<li><img src="1.jpg" width="1000" height="700"/></li>
<li><img src="1.jpg" width="1000" height="700"/></li>
</ul>
</div>
<a href="javascript:void(0);" id="prv"><<<<<<<</a>
---------
<a href="javascript:void(0);" id="next">>>>>>>></a>
<script type="text/javascript">
$(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);//继续定时
});
});
</script>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
yugi111
2014-11-21 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式