向左滑动js焦点图原理
我想自己学着做一个js实现的那种像做滑动的或者像又滑动的焦点图,,但是我不知道原理什么?我只想要思路,不要源码,忘大神指点...
我想自己学着做一个js实现的那种像做滑动的或者像又滑动的焦点图,,但是我不知道原理什么?我只想要思路,不要源码,忘大神指点
展开
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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询