列表左右滚动

1、引入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);
    })

})

2、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;}

 3、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>

4、图片