图片传送带轮播

1.内容最外层加上一个固定的div  class = fix 用来固定显示内容区 这里我们可以把它比作一扇窗户

2.在 固定的div内部 加上内容  内容尽量长度较长用来在传送显示的内容（内容的显示是相对于  fix的定位）

3.通过js来控制  内容的移动 在窗口那边就会显示不同的内容

<div class="fixTop40">
                        <table class="top40Tab">
                        
                        <tr>
                            <td class="timeCol"> <span >09月01日</span> </td>
                            <td class="statueCol"> <span>3:1</span> </td>
                            <td class="infoCol"> <span>中国&nbsp;<em>vs</em>&nbsp;韩国</span> </td>    
                        </tr>
                         <tr>
                            <td class="timeCol"> <span >09月01日</span> </td>
                            <td class="statueCol"> <span>3:1</span> </td>
                            <td class="infoCol"> <span>中国&nbsp;<em>vs</em>&nbsp;韩国</span> </td>    
                        </tr>
                         <tr>
                            <td class="timeCol"> <span >09月01日</span> </td>
                            <td class="statueCol"> <span>3:1</span> </td>
                            <td class="infoCol"> <span>中国&nbsp;<em>vs</em>&nbsp;韩国</span> </td>    
                        </tr>
                        <tr>
                            <td class="timeCol"> <span >09月01日</span> </td>
                            <td class="statueCol"> <span>3:1</span> </td>
                            <td class="infoCol"> <span>中国&nbsp;<em>vs</em>&nbsp;韩国</span> </td>    
                        </tr>
                         <tr>
                            <td class="timeCol"> <span >09月01日</span> </td>
                            <td class="statueCol"> <span>3:1</span> </td>
                            <td class="infoCol"> <span>中国&nbsp;<em>vs</em>&nbsp;韩国</span> </td>    
                        </tr>
                         <tr>
                            <td class="timeCol"> <span >09月01日</span> </td>
                            <td class="statueCol"> <span>3:1</span> </td>
                            <td class="infoCol"> <span>中国&nbsp;<em>vs</em>&nbsp;韩国</span> </td>    
                        </tr>
                        
                    </table>
                    </div>

.fixTop40{
    width:100%;
    height:230px;
    overflow:hidden;
    position:relative;
    
    }
.top40Tab{
    width:100%;
    font-size:0.9em;
    position:absolute;
    top:0;

    }

<!-- Top40上下翻动-->
function aa(){
    //获取实时的偏移量
    return parseInt($(".top40Tab").css("top"));
    //console.log(parseInt($(".top40Tab").css("top")));
}

$(".downTr3").click(function(){                                              //-----------     good
    var temp = 0;                //统计点击次数
    ////偏移量
    var offsetTop = aa();  
    var fixLength = $(".fixTop40").height();  //可视大小 
    var allLength = $(".top40Tab").height()+offsetTop;  //可滚动内容长度

    var round =parseInt(allLength/fixLength);         <!--最大点击次数-->     
//    var maxTop =  round*fixLength;  //
     console.log(offsetTop);
    console.log(round);
    console.log(temp);
    if(temp == round ){
        alert("我是有底线的~");
        }else{
            var top = offsetTop -fixLength+"px";
            
            $(".top40Tab").animate({"top":top},200);
            
            temp = temp+1;
            console.log(top);
            console.log($(".top40Tab").css("top"));
        }
    })    

 

转载于:https://www.cnblogs.com/RonnieQin/p/8057359.html