| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1350 人关注过本帖
标题:JS滚动,本来是上下滚动,怎么修改成左右滚动?
只看楼主 加入收藏
zxw445
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2014-8-2
结帖率:0
收藏
已结贴  问题点数:20 回复次数:2 
JS滚动,本来是上下滚动,怎么修改成左右滚动?
<style type="text/css" media="screen">
*{margin:0;padding:0;}
body {
    margin:0;
    padding:0;
    font-size:12px;
    font:12px/1.5em Tahoma, Verdana, Simsun, Microsoft YaHei, Arial Unicode MS, Mingliu, Arial, Helvetica;
}
img {
    border:none;
}
ul,li {
    margin:0;
    padding:0;
    list-style:none;
}
.slider {
    position:relative;
    width:748px;
    height:80px;
}
.slider .pic {}
.slider .pic img {
    width:748px;
    height:80px;
}
.slider .num {
    z-index:2;
    position:absolute;
    right:2px;
    bottom:2px;
    width:95px;
    height:16px;
}
.slider .num li {
    float:left;
    display:inline;
    width:16px;
    height:16px;
    line-height:16px;
    margin-left:3px;
    text-align:center;
    color:#595959;
    cursor:pointer;
}
.slider .num li.current {
    background-color:#ffffff;
    font-weight:bold;
    color:#ff4e00;
}
.slider .bg {
    z-index:1;
    position:absolute;
    right:2px;
    bottom:2px;
    width:95px;
    height:16px;
}
.slider .bg li {
    float:left;
    display:inline;
    width:16px;
    height:16px;
    line-height:16px;
    margin-left:3px;
    background-color:#fff;
    filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:#ffffff;font-size:0;
    text-align:center;
    color:#595959;
    font-size:0;
}
</style>
<a href="http://www.站长特效网</a>,站长必备的高质量网页特效和广告代码。,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.,zzjs@,用.net打造靓站-->
<script type="text/javascript" src="http://www.
<div class="slider" style="height:80px; overflow:hidden">
  <ul class="num" id="homePushName">
    <li id="homeAd0" class="current">1</li>
    <li id="homeAd1">2</li>
    <li id="homeAd2">3</li>
    <li id="homeAd3">4</li>
    <li id="homeAd4">5</li>
  </ul>
  <ul class="bg" id="homePushBg">
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
  </ul>
  <ul class="pic" id="homePushShow">
<li id="homePushShow1" style="height:80px; overflow:hidden;">
<a href="http:// target="_blank" title="站长特效网,打造国内最帅的网页特效站!"><img src="/ad/1.gif"/></a>
</li>
<li id="homePushShow2" style="height:80px; overflow:hidden;">
<a href="http://www. target="_blank" title="站长特效网,打造国内最帅的网页特效站!"><img src="/ad/2.gif"/></a>
</li>
<li id="homePushShow3" style="height:80px; overflow:hidden;">
<a href="http://www. target="_blank" title="三号广告图片说明信息"><img src="/ad/3.gif"/></a>
</li>
<li id="homePushShow4" style="height:80px; overflow:hidden;">
<a href="http://www. target="_blank" title="四号广告图片说明信息"><img src="/ad/4.gif"/></a>
</li>
<li id="homePushShow5" style="height:80px; overflow:hidden;">
<a href="http://www. target="_blank" title="五号广告图片说明信息"><img src="/ad/5.gif"/></a>
</li>
</ul>
</div>
<script type="text/javascript">
    var listItem=document.getElementById("homePushShow");
    var tList=document.getElementById("homePushName").childNodes;
    var controlItem=[];
    for(var i=0;i<tList.length;i++){
        if(tList[i].nodeName.toLowerCase()=="li"){
            controlItem.push(tList[i]);
        }
    }
    var picCount=controlItem.length;
    var cid=0;
    var tid=Math.floor(Math.random()*picCount);
    window.cTop=0
    window.gTop=0;
    window.speed=0;
    window.controlAction="";
    window.timeCount=0;
    setInterval(function(){
        if(cid!=tid){
            gTop=tid*80;
            speed=(gTop-cTop)/10;
            cid=tid;
            for(var i=0;i<picCount;i++){
                controlItem[i].className=((i==cid)?"current":"");
            }
        }
        if(window.cTop!=window.gTop){
            window.cTop+= parseInt(speed);
            listItem.style.marginTop="-"+ parseInt(window.cTop)+"px";
        }
        document.getElementById("homePushBg").style.display="block";
        document.getElementById("homePushName").style.display="block";
    },20);

    for(var i=0;i<picCount;i++){
        controlItem[i].onmouseover=function(){
            var goId=parseInt(this.innerHTML)-1;
            clearTimeout(window.controlAction);
            window.controlAction=setTimeout(function(){
                tid=goId;
                timeCount=0;
            },300);
        }
        controlItem[i].onmouseout=function(){
            clearTimeout(window.controlAction);
        }
    }

    setInterval(function(){
        timeCount+=1
        if(timeCount>=5){
            window.controlAction=setTimeout(function(){
                tid=tid+1;
                if(tid>=picCount){tid=0;}
            },20);
            timeCount=0;
        }
    },1000);
</script>
搜索更多相关主题的帖子: relative position Microsoft border screen 
2015-08-17 20:50
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:10 
listItem.style.marginTop="-"+ parseInt(window.cTop)+"px";
看到这句了吗
改成
listItem.style.marginLeft="-"+ parseInt(window.cTop)+"px";
就可以了
基本思路就是这个,只改这个很可能会有其他的bug,我没细看你的代码

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-08-21 14:42
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:138
帖 子:2277
专家分:10647
注 册:2015-3-19
收藏
得分:10 
以下是引用冰镇柠檬汁儿在2015-8-21 14:42:57的发言:

listItem.style.marginTop="-"+ parseInt(window.cTop)+"px";
看到这句了吗
改成
listItem.style.marginLeft="-"+ parseInt(window.cTop)+"px";
就可以了
基本思路就是这个,只改这个很可能会有其他的bug,我没细看你的代码

前后不对应parseInt(window.cTop)+"px";
还是看具体算法

剑栈风樯各苦辛,别时冰雪到时春
2015-08-24 20:25
快速回复:JS滚动,本来是上下滚动,怎么修改成左右滚动?
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.025621 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved