1 js: 父元素.scrollLeft ++;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;}
#con{
margin: 0 auto;
width: 700px; /* 140X5 ==700 */
height: 90px;
outline: 6px solid red;
overflow: hidden; /* overflow: scroll;*/
}
#con div{
background: grey;
width: 1440px; outline: 1px green solid; }
#con img {
width: 120px;
margin-right:20px;}
</style>
</head>
<body>
<div id="con">
<div id="divImg">
<!-- inline-block 会解析空格即标签间空格会认为有间距-->
<img src="images/linkTo1.jpg" alt=""/><img
src="images/linkTo2.jpg" alt=""/><img
src="images/linkTo3.jpg" alt=""/><img
src="images/linkTo4.jpg" alt=""/><img
src="images/linkTo5.jpg" alt=""/><img
src="images/linkTo1.jpg" alt=""/><img
src="images/linkTo2.jpg" alt=""/><img
src="images/linkTo3.jpg" alt=""/><img
src="images/linkTo4.jpg" alt=""/><img
src="images/linkTo5.jpg" alt=""/>
</div>
</div>
<!--<span id="span1"> </span>-->
</body>
<script>
function scrollImg(){
con.scrollLeft ++;
if( con.scrollLeft >=con.scrollWidth/2 -20 )
{
con.scrollLeft = 0;
}
// span1.innerHTML= con.scrollLeft;
}
window.setInterval(scrollImg,10);
</script>
</html>
2 marquee标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
margin: 50px;
width: 50px;
height: 50px;background: lightseagreen;}
</style>
</head>
<body>
<marquee behavior="scroll" direction="up">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</marquee>
</body>
</html>
<!-- 转载: http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html
语法:<marquee>...</marquee>; 说明:在标记之间添加要进行滚动的内容。
重要属性:
1.滚动方向direction(包括4个值:up、 down、 left和 right)
语法:<marquee direction="滚动方向">...</marquee>
2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)
语法:<marquee behavior="滚动方式">...</marquee>
3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)
语法:<marquee scrollamount="5">...</marquee>
4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)
语法:<marquee scrolldelay="100">...</marquee>
5.滚动循环loop(默认值是-1,滚动会不断的循环下去)
语法:<marquee loop="2">...</marquee>
6.滚动范围width、height
7.滚动背景颜色bgcolor
8.空白空间hspace、vspace-->