列表左右滾動

一、引入js

// JavaScript Document
$(document).ready(function(e) {
    /***不須要自動滾動，去掉便可***/
    time = window.setInterval(function(){
        $('.og_next').click();    
    },5000);
    /***不須要自動滾動，去掉便可***/
    linum = $('.mainlist li').length;//圖片數量
    w = linum * 205;//ul寬度
    $('.piclist').css('width', w + 'px');//ul寬度
    $('.swaplist').html($('.mainlist').html());//複製內容
    
    $('.og_next').click(function(){
        
        if($('.swaplist,.mainlist').is(':animated')){
            $('.swaplist,.mainlist').stop(true,true);
        }
        
        if($('.mainlist li').length>5){//多於5張圖片
            ml = parseInt($('.mainlist').css('left'));//默認圖片ul位置
            sl = parseInt($('.swaplist').css('left'));//交換圖片ul位置
            if(ml<=0 && ml>w*-1){//默認圖片顯示時
                $('.swaplist').css({left: '1025'});//交換圖片放在顯示區域右側
                $('.mainlist').animate({left: ml - 1025 + 'px'},'slow');//默認圖片滾動
                if(ml==(w-1025)*-1){//默認圖片最後一屏時
                    $('.swaplist').animate({left: '0px'},'slow');//交換圖片滾動
                }
            }else{//交換圖片顯示時
                $('.mainlist').css({left: '1025px'})//默認圖片放在顯示區域右
                $('.swaplist').animate({left: sl - 1025 + 'px'},'slow');//交換圖片滾動
                if(sl==(w-1025)*-1){//交換圖片最後一屏時
                    $('.mainlist').animate({left: '0px'},'slow');//默認圖片滾動
                }
            }
        }
    })
    $('.og_prev').click(function(){
        
        if($('.swaplist,.mainlist').is(':animated')){
            $('.swaplist,.mainlist').stop(true,true);
        }
        
        if($('.mainlist li').length>5){
            ml = parseInt($('.mainlist').css('left'));
            sl = parseInt($('.swaplist').css('left'));
            if(ml<=0 && ml>w*-1){
                $('.swaplist').css({left: w * -1 + 'px'});
                $('.mainlist').animate({left: ml + 1025 + 'px'},'slow');
                if(ml==0){
                    $('.swaplist').animate({left: (w - 1025) * -1 + 'px'},'slow');
                }
            }else{
                $('.mainlist').css({left: (w - 1025) * -1 + 'px'});
                $('.swaplist').animate({left: sl + 1025 + 'px'},'slow');
                if(sl==0){
                    $('.mainlist').animate({left: '0px'},'slow');
                }
            }
        }
    })    
});

$(document).ready(function(){
    $('.og_prev,.og_next').hover(function(){
            $(this).fadeTo('fast',1);
        },function(){
            $(this).fadeTo('fast',0.7);
    })

})

二、css樣式

/* CSS Document */
.box{ width:1024px; margin:0 auto; position:relative; overflow:hidden; _height:100%;}
.picbox{ width:1024px; height:183px; overflow:hidden; position:relative;}
.piclist{ height:183px;position:absolute; left:0; top:0;}
.piclist li{ text-align: center; background: url("../images/vedio/list_bj.png") no-repeat; margin-right:6px; float:left; width: 199px; height: 183px; padding-top: 10px; }
.piclist li img{width: 180px; height: 101px;}
.swaplist{ position:absolute; left:-6150px; top:0;}
.og_prev,.og_next{ width:30px; height:50px; background:url(../images/icon.png) no-repeat; background:url(../images/icon_ie6.png) no-repeat\9; position:absolute; top:50px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
.og_prev{ background-position:0 -60px; left:4px;}
.og_next{ background-position:0 0; right:4px;}

.vedio_btn{ text-align: center; margin-top: 13px;}
.vedio_btn p{ display: inline-block; color:#fff; font-size: 14px;  line-height: 35px; width: 179px; height: 35px; background: url("../images/vedio/list_btn.png") no-repeat; padding: 0; margin-bottom: 0;}

 三、div標籤

<div class="box">
                <div class="picbox">
                    <ul class="piclist mainlist">
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/1.jpg" />
                                <div class="vedio_btn">
                                    <p>部門名稱部門名稱部門</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <ul class="piclist swaplist"></ul>
                </div>
                <div class="og_prev"></div>
                <div class="og_next"></div>
            </div>

四、圖片