js滚动表

㈠ js实现点击按钮图片左右滚动，不要自动滚动的。谢谢各位了！

文章由贝奇动漫网搜集整理
//XHTML代码

<div class="rollBox">
<img onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()" class="img1" src="../images/life/shqm_left_pic.gif"

width="12" height="31" />
<div class="Cont" id="ISL_Cont">
<div class="ScrCont">
<div id="List1">

<!-- 图片列表 begin -->

<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>

<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>

<!-- 图片列表 end -->

</div>
<div id="List2"></div>
</div>
</div>
<img onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()" class="img2" src="../images/life/shqm_right_pic.gif"

width="12" height="31" />
</div>

//CSS代码

.rollBox{width:620px;overflow:hidden;margin:0 auto;}
.rollBox .Cont{width:620px;overflow:hidden;margin:0 auto;padding-top:20px;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:20px;}
*+html .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:30px;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}

//JS代码

<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 10; //速度(毫秒)
var Space = 10; //每次移动(px)
var PageWidth = 160; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementByIdx){return eval_r('document.getElementByIdx("'+objName+'")')}else{return eval

('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
clearInterval(AutoPlayObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
}
function ISL_GoUp(){ //上翻开始
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //上翻停止
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrUp(){ //上翻动作
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj

('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //下翻
clearInterval(MoveTimeObj);
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //下翻停止
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrDown(){ //下翻动作
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft =

GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
GetObj('ISL_Cont').scrollLeft += Space ;
}
function CompScr(){
var num;
if(Comp == 0){MoveLock = false;return;}
if(Comp < 0){ //上翻
if(Comp < -Space){
Comp += Space;
num = Space;
}else{
num = -Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()',Speed);
}else{ //下翻
if(Comp > Space){
Comp -= Space;
num = Space;
}else{
num = Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft += num;
setTimeout('CompScr()',Speed);
}
}
//--><!]]>
</script>

PS：注意CSS里层宽度的设置

㈡ 怎么使用js实现滚动条效果

在JavaScript中，实现滚动条效果可以通过多种方式完成。以下是一些常见的方法：
### 使用`scrollTop`和`scrollLeft`属性
你可以通过改变`scrollTop`和`scrollLeft`属性来控制滚动条的位置。这两个属性分别控制垂直和水平的滚动位置。
```javascript
// 获取滚动条位置
console.log(document.getElementById('myElement').scrollTop);
// 设置滚动条位置
document.getElementById('myElement').scrollTop = 100;
```
### 使用`scrollIntoView`方法
`scrollIntoView`方法可以用来滚动页面，使元素进入视口。你可以通过设置`behavior`参数来控制滚动行为（平滑、快速或默认）。
```javascript
document.getElementById('myElement').scrollIntoView({ behavior: 'smooth' });
```
### 使用CSS和JavaScript结合
你可以使用CSS来隐藏滚动条，然后使用JavaScript来控制滚动内容的大小，从而实现滚动效果。
```css
.scroll-container {
overflow: hidden;
height: 200px;
}
.scroll-content {
width: 100%; /* 或者设置一个大于容器宽度的宽度 */
overflow-y: scroll; /* 添加垂直滚动条 */
}
```
```javascript
const scrollContent = document.querySelector('.scroll-content');
scrollContent.style.height = '500px'; // 设置滚动内容的高度
```
### 使用第三方库
还有一些第三方库可以帮助你实现更复杂的滚动效果，例如`marquee`、`scrollReveal`等。
### 示例：创建一个简单的滚动效果
以下是一个简单的示例，它使用JavaScript来控制一个滚动容器的内容滚动。
HTML:
```html
<div id="scrollContainer" class="scroll-container">
<div id="scrollContent" class="scroll-content">
<!-- 内容 -->
</div>
</div>
```
CSS:
```css
.scroll-container {
width: 300px;
height: 150px;
overflow: hidden;
}
.scroll-content {
width: 100%;
height: 500px; /* 超过容器的高度 */
background-color: #f0f0f0;
overflow-y: scroll;
}
```
JavaScript:
```javascript
const scrollContent = document.getElementById('scrollContent');
// 假设你想要滚动到特定的位置
scrollContent.scrollTop = 100;
// 或者你可以创建一个滚动函数
function scrollDown() {
if (scrollContent.scrollTop < scrollContent.scrollHeight - scrollContent.clientHeight) {
scrollContent.scrollTop += 1;
} else {
// 滚动到底部
}
}
// 每50毫秒滚动一次
setInterval(scrollDown, 50);
```
在这个示例中，`setInterval`函数每50毫秒调用一次`scrollDown`函数，从而使内容逐渐向下滚动。注意，这个示例只是为了说明如何使用JavaScript控制滚动，实际应用中可能需要更复杂的逻辑。

㈢ js实现图片左右滚动

根据楼上做了点修改，这是用jquery，所以一定要链接jquery库。

<html>
<head>
<title></title>
<styletype="text/css">
body,ul,li{list-style:noneoutsidenone;padding:0;margin:0;}
#picScroll{width:350px;overflow:hidden;}
ul{width:1000%;}
ulli{float:left;}
liimg{width:100px;height:100px;}
</style>
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
</head>
<body>

<divid="picScroll">
<ul>
<li>
<a><imgsrc="../pic/1.jpg"/></a>
<a><imgsrc="../pic/2.jpg"/></a>
<a><imgsrc="../pic/3.jpg"/></a>
<a><imgsrc="../pic/4.jpg"/></a>
<a><imgsrc="../pic/5.jpg"/></a>
</li>
<li></li>
</ul>
</div>
<scripttype="text/javascript">
vartarget=$('#picScroll');//其实标准的写法是var$target=$('#picScroll');
varleft=0;
varspeed=30;

varli=$('#picScrollulli');
li.eq(1).html(li.eq(0).html());//复制第一个li节点内容，赋值给第二个li目的是为了实现无限循环滚动
functionMarqeen(){
if(li[0].offsetWidth<=left){
left-=li[0].offsetWidth;
}
else{
left++;
}
target.scrollLeft(left);
}
$(function(){
varmarQueen=window.setInterval(Marqeen,speed);
target.mouseover(function(){
clearInterval(marQueen);
});
target.mouseout(function(){
marQueen=window.setInterval(Marqeen,speed);
});
});
</script>
</body>
</html>

下面是用 js 写的，不用连接jquery库了，可以对比一下上面的jquery代码

<scripttype="text/javascript">
	vartarget=document.getElementById('picScroll');
varleft=0;
varspeed=30;
	
	varLI=target.getElementsByTagName('li');
	LI[1].innerHTML=LI[0].innerHTML;
functionMarqeen(){
		
if(LI[0].offsetWidth<=left){
left-=LI[0].offsetWidth;
}
else{
left++;
}
target.scrollLeft=left;
}
		
	varmarQueen=window.setInterval(Marqeen,speed);
	target.mouseover=function(){
		clearInterval(marQueen);
	};
	target.mouseout=function(){
		marQueen=window.setInterval(Marqeen,speed);};
</script>