您的位置：首页 > Web前端 > HTML

html图片左右无缝循环滚动示例

2016-11-28 15:17 465 查看

首先，最外层的宽高要给个固定值，然后给个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>

demo

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航