• 列表左右滚动


    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{ 1024px; margin:0 auto; position:relative; overflow:hidden; _height:100%;}
    .picbox{ 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;  199px; height: 183px; padding-top: 10px; }
    .piclist li img{ 180px; height: 101px;}
    .swaplist{ position:absolute; left:-6150px; top:0;}
    .og_prev,.og_next{ 30px; height:50px; background:url(../images/icon.png) no-repeat; background:url(../images/icon_ie6.png) no-repeat9; 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;  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、图片

  • 相关阅读:
    单例模式
    C++继承-重载-多态-虚函数
    c++仿函数 functor
    常用排序算法实现与效率比较
    树的中序非递归遍历
    二叉树递归遍历
    队列的顺序存储框架
    栈的链式存储框架
    栈的顺序存储构架
    函数指针和回调函数
  • 原文地址:https://www.cnblogs.com/pheosia/p/8434377.html
Copyright © 2020-2023  润新知