原理:(以左方向为例)先向左移动一个图片的宽度,此时第一个图片已经看不见了,这个时候将第一个标签元素克隆后追加到末尾,然后将第一个元素移除。达到循环滚动的效果。右移也是同理。
经测试代码如下:
<!DOCTYPE html><html>
<head>
<meta charset=utf-8 />
<meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1>
<title></title>
<script type=text/javascript src=js/jquery.min.js></script>
<script type=text/javascript src=js/center.js></script>
</head>
<style type=text/css>
.img_content {width: 600px;margin: 0;padding: 0;height: 200px;position: absolute;overflow: hidden;}
.img_content ul {list-style: none;margin: 0;padding: 0;position: absolute;width: 1000px;}
.img_content ul li {float: left;margin: 0;padding: 0;}
.img_content ul li img {width: 200px; height: 200px;}
button {width: 100px;height: 40px;border-radius: 5px;background: cornflowerblue;color: white;border: 0;}
</style>
<body>
<div class=img_content>
<ul>
<li><img src=img/1.jpg /> </li>
<li><img src=img/2.jpg /> </li>
<li><img src=img/3.jpg /> </li>
<li><img src=img/4.jpg /> </li>
<li><img src=img/5.jpg /> </li>
<li><img src=img/6.jpg /> </li>
<li><img src=img/7.jpg /> </li>
<li><img src=img/8.jpg /> </li>
</ul>
</div>
<button id=left>左</button>
<button id=right>右</button>
<button id=auto>自动切换</button>
<button id=stop>取消自动切换</button>
<script>
centerParent($('.img_content')[0]);
$('#left').click(function() {
scrollLeft();
});
$('#right').click(function() {
scrollRight();
});
/*向左滑动*/
function scrollLeft() {
/*先向左移动一个图片的宽度 移动后在末尾追加第一个元素 然后将第一个元素移除 */
$('ul').animate({
left: -200
},200,function() {
$('ul').append($('ul li:first').clone());
$('ul li:first').remove();
}); /*将left值置为0*/
$('ul').animate({
left: 0
},0);
}
/*向右滑动*/
function scrollRight() {
/*先向右移动一个图片的宽度 移动后把最后一个元素插入到头部 然后移除最后一个元素*/
$('ul').animate({
left: -200
},function() {
$('ul').prepend($('ul li:last').clone());
$('ul li:last').remove();
}); /*完成上面动作后将left置为0*/
$('ul').animate({
left: 0
},200);
} var auto;
$('#auto').click(function() {
auto = setInterval(scrollLeft,2000);
});
$('#stop').click(function() {
clearInterval(auto);
});
</script>
</body>
</html>
<!-- 来自 编程之家 jb51.cc (jb51.cc)-->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。