带滚动条的div如何实现内容滑动，新手不懂，求高手支招
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带滚动条的div如何实现内容滑动，新手不懂，求高手支招相关的知识，希望对你有一定的参考价值。
如图，
图中我放了一个div（灰色那部分是在一个div里面的一个列表），我用js设置了点击蓝色按钮他会向后一个li标签，如图
但是他是直接跳过去的，想问下如何实现一个滑动过去的效果
最近正好写了个代码好像就是你要的效果 这种效果较轮播吧好像是
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="1.css">
<script src="jquery-2.1.4.js"></script>
</head>
<body>
<button id="prev">前一张图片</button>
<button id="next">后一张图片</button>
<div class="imgList">
<div class="imgList-style">
<div class="imgList1">
<img class="img" src="1.jpg">
<img class="img" src="1.jpg">
<img class="img" src="1.jpg">
<img class="img" src="1.jpg">
<img class="img" src="1.jpg">
</div>
<div class="imgList2">
<img class="img" src="2.jpg">
<img class="img" src="2.jpg">
<img class="img" src="2.jpg">
<img class="img" src="2.jpg">
<img class="img" src="2.jpg">
</div>
<div class="imgList3">
<img class="img" src="3.jpg">
<img class="img" src="3.jpg">
<img class="img" src="3.jpg">
<img class="img" src="3.jpg">
<img class="img" src="3.jpg">
</div>
<div class="imgList4">
<img class="img" src="4.jpg">
<img class="img" src="4.jpg">
<img class="img" src="4.jpg">
<img class="img" src="4.jpg">
<img class="img" src="4.jpg">
</div>
</div>
</div>
</body>
<script src="1.js"></script>
</html>$(document).ready(function()
var marginpx = 0,
imgList = $(\'.imgList\').width(),
num = $(\'.imgList-style div\').length-1;
$("#prev").click(function()
if(marginpx !=0)
marginpx += imgList;
$(".imgList-style").css("margin-left",marginpx+"px");
else
marginpx = num*imgList*-1;
$(".imgList-style").css("margin-left",marginpx+"px");
);
$("#next").click(function()
if(marginpx != (num*imgList*-1))
marginpx -= imgList;
$(".imgList-style").css("margin-left",marginpx+"px");
else
marginpx = 0;
$(".imgList-style").css("margin-left",marginpx+"px");
);
);.img
width:150px;
height:100px;
.imgList
width:782px;
height:auto;
overflow-x:hidden;
.imgList-style
transition: margin-left 1s;
-moz-transition: margin-left 1s; /* Firefox 4 */
-webkit-transition: margin-left 1s; /* Safari 和 Chrome */
-o-transition: margin-left 1s; /* Opera */
width:3128px;
height:103px;
.imgList1,.imgList2,.imgList3,.imgList4
float:left;
第一个是HTML 第二个是JS第三个是CSS
Javascript如何控制Div的滚动条的位置？
参考技术A 通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。
示例 ：
<body>
//d1是外层div，带滚动条
<div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'>
<div style='height:500px;width:500px;background:yellow'>2222</div>
</div>
</body>
<script>
document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置
document.getElementById('d1').scrollLeft=200;//通过scrollTop设置滚动到200位置
</script>
以上是关于带滚动条的div如何实现内容滑动，新手不懂，求高手支招的主要内容，如果未能解决你的问题，请参考以下文章
如何用js控件div的滚动条，让它在内容更新时自动滚到底部？