html图片左右滚动效果
内容摘要
这篇文章主要为大家详细介绍了html图片左右滚动效果，具有一定的参考价值，可以用来参考一下。
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。原
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。原
文章正文
这篇文章主要为大家详细介绍了html图片左右滚动效果，具有一定的参考价值，可以用来参考一下。
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。经测试代码如下：
<!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>
<!-- 来自 php教程 （www.idcnote.com）-->注：关于html图片左右滚动效果的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
