亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

向左無縫滾動實現了一半,遇到點問題,求大神指導

function?scrollL(){
if(m.scrollLeft>=c1.offsetWidth){
????????m.scrollLeft=0;
????}else{
????????m.scrollLeft++;
????}
}

別的地方都差不多,不全寫了,方法如上,應該是沒什么問題的。

主要是定義了c1,和c2兩個ul,他倆里面的li內容有10條,每條給寬度150px;所以ul總長是1500

所以定義了向左滾動的盒子和里面ul的樣式

#zuo{
width:?500px;
overflow:?hidden;
....等等
}
#zuo?ul{
width:?1500px;
float:?left;
}


問題來了,c1能滾動,一切正常,但是滾到最后的時候就沒了,

F12看瀏覽器,發現c1和c2不在一行,是一上一下,c1滾到頭c2沒法接。

是c1和c2這兩個ul寬度的問題,都是1500,加起來3000,超出100%了,所以c2沒有float:left上去,


求大神指點。。。


正在回答

2 回答

ul可以通過position:absolute的方式實現排列。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js圖片滾動效果制作</title>

<style>

* { padding:0; margin:0;}

ul,li,ol { list-style:none}

#con{

? ? width:800px; height:220px; margin:50px auto; padding:10px;

? ? border:1px solid #666;

? ? overflow:hidden; position:relative;

? ? }

ul { width:1100px;}

#con1 { position:absolute;}

#con2 { position:absolute; left:1100px;}

li{

? ? list-style:none;

? ? float:left;

margin-right:5px;

? ? ? ? }?

? ? ?

</style>

?

</head>

?

<body>

<div id="con">

? ?<ul id="con1">

? ? ? <li><img src="pic.jpg" width="269" height="210" /></li>

? ? ? <li><img src="pic1.jpg" width="269" height="210"/></li>

? ? ? <li><img src="pic2.jpg" width="269" height="210" /></li>

? ? ? <li><img src="pic3.jpg" width="269" height="210" /></li>

? ?</ul>

? ?<ul id="con2"></ul>

</div>

<script>

var con = document.getElementById('con');

?var con1 = document.getElementById('con1');

?var con2 = document.getElementById('con2');

?var speed = 10;

?con.scrollLeft = 0;

?con2.innerHTML = con1.innerHTML;

?function scrollLeft(){

? ? ?if(con.scrollLeft >= con1.scrollWidth) {

? ? ? ? con.scrollLeft = 0;

? ? ? ? ?}else{

? ? ? ? ? ?con.scrollLeft ++;?

? ? ? ? ?}?

}

var myScroll = setInterval("scrollLeft()",speed);

con.onmouseover=function(){

? ? clearInterval(myScroll);

? ? }

con.onmouseout=function(){

? ? myScroll = setInterval("scrollLeft()",speed);

? ? } ?

</script>

</body>

</html>


0 回復 有任何疑惑可以回復我~

如果只是位置接不上了,試試把ul設置成內聯或內聯塊~~display:inline; ? ?display:inline-block;

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
信息滾動效果制作
  • 參與學習       47740    人
  • 解答問題       333    個

萌妹子帶您快速學習滾動效果,掌握無縫滾動和歇間性滾動的制作方法

進入課程

向左無縫滾動實現了一半,遇到點問題,求大神指導

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號