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>