滑动轮播图

来源：互联网发布：淘宝网店培训学校编辑：程序博客网时间：2024/06/07 04:07
自己写了个简单的滑动轮播特效分享给大家：
代码如下：<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <style>    *{margin:0px;padding:0px;list-style: none;}    /*先对所有的li进行绝对定位，然后通过改变left和top属性实现滑动效果*/    body{position: relative;}    .left{position: relative;width:300px;height:340px;margin:100px 00px;border: 1px solid;overflow: hidden;float:left;}    .up{position: relative;width:340px;height:300px ;margin:120px 100px;border: 1px solid;overflow: hidden;float:left;}    ul li{width:300px;height: 300px;float:left;position: absolute;font-size: 50px;line-height: 300px;text-align: center;color:white;}    .left ul li{top:20px;left:300px;}    .up ul li{top:-300px;left:20px;}    ol{position: absolute;z-index: 100;}    ol li{margin: 5px;background: white;cursor: pointer;}    .left ol{bottom:20px;left:10px;}    .left ol li{width:20px;height: 5px;float:left;}    .up ol{top:20px;right:20px;}    .up ol li{width:5px;height: 20px;}    .top{z-index: 99;}    </style>    <body>        <!-- 左右滑动部分 -->        <div class='left'>            <!-- ul和ol下的li数量一致 -->            <ul class='banner'>                <li style='background-color:#FF99CC;left:0px;'>would</li>                <li style='background-color: #CCCCFF;'>you</li>                <li style='background-color: #99CC33;'>marry</li>                <li style='background-color: #99CCCC;'>me</li>                <li style='background-color: #CC99CC;'>?</li>            </ul>            <ol>                <li style='background-color:black;'></li>                <li></li>                <li></li>                <li></li>                <li></li>            </ol>        </div>        <!-- 上下滑动部分 -->        <div class='up'>        <!-- ul和ol下的li数量一致 -->            <ul class='banner2'>                <li style='background-color: #FF99CC;top:0px;'>would</li>                <li style='background-color: #CCCCFF;'>you</li>                <li style='background-color: #99CC33;'>marry</li>                <li style='background-color: #99CCCC;'>me</li>                <li style='background-color: #CC99CC;'>?</li>            </ul>            <ol>                <li style='background-color:black;'></li>                <li></li>                <li></li>                <li></li>                <li></li>            </ol>        </div>    </body>    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <script>        $(document).ready(function(){            (function(){                // 左右滑动 leftright()                function lr(){                    var num=0;                    var asd=0;                    var length=$('.banner li').length;                    var clock;                    clock=setInterval(auto,3000)                    function auto(){                        asd=num;                        num+=1;                        if(num>=length){                            num=0                        }                        change();                    }                    function change(){                        $('.left ul li').eq(num).animate({left:'0px'},1000).addClass('top');                        $('.left ul li').eq(asd).animate({left:'-300px'},1000,function(){                            $(this).css('left','300px')                        }).removeClass('top');                        $('.left ol li').css('background','white');                        $('.left ol li').eq(num).css('background','black');                    };                    $('.left ol li').click(function(){                        asd=num;                        clearInterval(clock);                        num=$(this).index();                        if(num<asd){                            $('.left ul li').eq(num).css('left','-300px');                            $('.left ul li').eq(asd).animate({left:'300px'},1000).removeClass('top');                            $('.left ul li').eq(num).animate({left:'0px'},1000).addClass('top');                            $('.left ol li').css('background','white');                            $('.left ol li').eq(num).css('background','black');                        }else if(num==asd){                            return false;                        }else{                            change();                        };                        clock=setInterval(auto,3000);                    });                    $('.left').mouseover(function(){                        clearInterval(clock);                    });                    $('.left').mouseout(function(){                        clearInterval(clock);                        clock=setInterval(auto,3000);                    });                };                // 上下滑动 updown()                function ud(){                    var num2=0;                    var asd2=0;                    var length2=$('.banner2 li').length;                    var clock2;                     clock2=setInterval(auto2,3000)                    function auto2(){                        asd2=num2;                        num2+=1;                        if(num2>=length2){                            num2=0                        }                        change2();                    }                    function change2(){                        $('.up ul li').eq(num2).animate({top:'0px'},1000).addClass('top');                        $('.up ul li').eq(asd2).animate({top:'300px'},1000,function(){                            $(this).css('top','-300px')                        }).removeClass('top');                        $('.up ol li').css('background','white');                        $('.up ol li').eq(num2).css('background','black');                    };                    $('.up ol li').click(function(){                        asd2=num2;                        clearInterval(clock2);                        num2=$(this).index();                        if(num2<asd2){                            $('.up ul li').eq(num2).css('top','300px');                            $('.up ul li').eq(asd2).animate({top:'-300px'},1000).removeClass('top');                            $('.up ul li').eq(num2).animate({top:'0px'},1000).addClass('top');                            $('.up ol li').css('background','white');                            $('.up ol li').eq(num2).css('background','black');                            // $('ul li').css('top','300px');                        }else if(num2==asd2){                            return false;                        }else{                            change2()                        };                        clock2=setInterval(auto2,3000);                    });                    $('.up').mouseover(function(){                        clearInterval(clock2);                    });                    $('.up').mouseout(function(){                        clearInterval(clock2);                        clock2=setInterval(auto2,3000);                    });                };                lr();                ud();            })();        });    </script></html>
这里写图片描述
0 0