① js圖片無縫滾動只滾動一次就停止了這個問題請教一下,怎麼辦
無縫滾動通常採用一個源版塊,一個復製版塊,兩塊並排合成一個版主體,在一個較小權范圍的母版塊里並排滾動。
假設向上滾動那麼
js每隔幾十毫秒設置主體頭部減一
js判斷當版塊2的頭部減母版塊的頭部小於等於零時就設置版塊主體頭部等零,這樣就實現了一個循環
如果你的判斷有誤或者錯誤賦值或者這個主體總長還沒有母版塊長就會失靈。
② 達人幫忙看下為什麼這段圖片無縫滾動代碼只循環滾動兩次就停了
我是做網頁來的,我雖自然沒有研究過關於這個的具體的代碼,但是我知道,那是因為 你的 indemo的寬度造成的,因為我實驗過,而且當你的寬度不合適的時候,在圖片介面處會蹦一下。
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
③ jquery 選項卡里 圖片列表無縫滾動 ,為什麼按 選項卡2之後 圖片不滾動了
幫你看了一下,你的意思是當你點擊2按鈕的時候,就不會動了是吧?專其實都是在動的,屬只是你不懂測試。因為你的css樣式寫得不好,導致你整個過程都不怎麼清晰,#videoscr這個ID不要display=「none」就可以看出效果了,要修改地方的代碼,我再發一次給你
$(function(){
$(".Box .Box_t span:first-child").addClass("cur");
var hq_li=$(".Box .Box_t span");
hq_li.click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
var index = hq_li.index(this);
//$(".Box #videoscr").eq(index).show().siblings().hide(); 注釋掉這行就能達到你想要的效果了
})
})
④ 圖片無縫滾動代碼為什麼不循環了,
<div id="com">
<table border="0" align="left" cellpadding="0" cellspacing="0" cellspace="0">
<tr>
<td id="com1" valign="top"><table border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-left:1px;"><img src="image/gundong01.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>屏峰雲海</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong02.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>靈泉悟禪</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong03.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>世外桃源</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong04.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>常德詩牆</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong05.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>柳葉湖</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong06.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>澧縣文廟</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong07.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>澧縣城頭山文化遺址</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong08.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>安鄉土生源農庄</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong09.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>虎溪漂流</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong10.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>柳葉湖旅遊度假區</li>
</ul></td>
<td style="padding-left:1px;"><img src="image/gundong11.jpg" alt="" width="200" height="100" border="0" />
<ul>
<li>常德博物館</li>
</ul></td>
</tr>
</table></td>
<td id="com2" valign="top"></td>
</tr>
</table>
</div>
<SCRIPT>
var speed3=10;//速度數值越大速度越慢
var com1 = document.getElementById("com1"); //非w3c標准要找到表單,必須是要用getElementById("XX");
var com2 = document.getElementById("com2");
var com = document.getElementById("com");
com2.innerHTML=com1.innerHTML;
function Marquee3(){
if(com2.offsetWidth-com.scrollLeft<=0)
com.scrollLeft-=com1.offsetWidth;
else{
com.scrollLeft++;
}
}
var MyMar3=setInterval(Marquee3,speed3)
com.onmouseover=function() {clearInterval(MyMar3)}
com.onmouseout=function() {MyMar3=setInterval(Marquee3,speed3)}
</SCRIPT>
⑤ javascript寫的圖片無縫滾動,向左滾動正常,向右滾動不正常(滾過去第一個就沒了),大家幫忙看下如何解決
親,你可以去搜智能社的javascript視頻來看,講解過程通俗易懂,也有無縫滾動這部分的內容
⑥ 我這個無縫滾動的效果 為什麼還是會晃動一下
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#div2{width:600px;overflow:hidden;position:relative;left:200px;}
#div1{position:relative;left:0px;width:1200px;}
#div1 li{list-style-type: none;float:left;width:200px;height:180px;
}
img{width:100%;height:100%;}
</style>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var oDiv=document.getElementById('div1');
var oBtn=document.getElementById('btn1');
var t=0;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oBtn.onclick=function(){
clearInterval(t);
t=setInterval(function(){
if(oDiv.offsetLeft<=-oUl.offsetWidth/2)
{
oDiv.style.left=0+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft-22+'px';
};
},55);
};
} ;
</script>
</head>
<body>
<input id="btn1" value="開始" type="button";>
<div id="div2">
<div id="div1">
<ul id="ul1">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
⑦ js無縫滾動代碼 為何停止
if(div2.offsetTop-bigdiv.scorllTop<=0)
這里的scorllTop拼寫錯了,應該是scrollTop.
試了一下,沒發現你說的問題,但上面的錯誤也可導至不滾動.測試通過的代碼如下:
<body>
<div id="bigdiv" style="width:200px; height:200px; overflow:hidden;">
<div id="div1"><img src="" style="width:100;"><img src="" style="width:100;"><img src="" style="width:100;"><img src="" style="width:100;"><img src="" style="width:100;"></div>
<div id="div2"></div>
</div>
<script type="text/javascript">
function marquee(){
div2.innerHTML=div1.innerHTML;
if(bigdiv.scrollTop>=div2.offsetHeight)
.scrollTop-=div1.offsetHeight;
else
bigdiv.scrollTop++;
}
var ooo = setInterval(marquee, 60)
bigdiv.onmouseover=function() {clearInterval(ooo) }
bigdiv.onmouseout=function() {ooo = setInterval(marquee, 60) }
</script>
</body>
⑧ JavaScript我這個無縫滾動為什麼還有明顯的停頓
卡頓的問題有兩個因素影響了,一個是:向左移動的速度必須為div寬度能整除的數,要不減到最後判斷的時候會有餘量。二個是:判斷的時候已經到了邊界了,所以應該執行下一次。修改的例子:
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>無縫滾動</title>
<styletype="text/css">
*{margin:0;padding:0;}
#div2{width:600px;overflow:hidden;position:relative;left:200px;}
#div1{position:relative;left:0px;width:1200px;}
#div1li{list-style-type:none;float:left;width:200px;height:180px;
}
img{width:100%;height:100%;}
</style>
<script>
window.onload=function(){
varoUl=document.getElementById('ul1');
varoDiv=document.getElementById('div1');
varoBtn=document.getElementById('btn1');
vart=0;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
varspeed=20;//速度,必須是oUl.offsetWidth能整除的數;
oBtn.onclick=function(){
clearInterval(t);
t=setInterval(function(){
if(oDiv.offsetLeft<=-oUl.offsetWidth/2){
oDiv.style.left=-speed+'px';//因為判斷的時候已經到了邊界了,所以應該執行下次
}else{
oDiv.style.left=oDiv.offsetLeft-speed+'px';
}
},50);
}
}
</script>
</head>
<body>
<inputid="btn1"value="開始"type="button"/>
<divid="div2">
<divid="div1">
<ulid="ul1">
<li><imgsrc="1.jpg"></li>
<li><imgsrc="2.jpg"></li>
<li><imgsrc="3.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
⑨ 為什麼無縫滾動滾動一圈後,又不滾動了
你的代碼呢