大家好，又见面了，我是你们的朋友全栈君。
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。
原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。下面是代码实现和demo
<!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
}, 0, 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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/161314.html原文链接：https://javaforall.net
