jquery简单轮播图实现

来源：互联网发布：highcharts.js api 编辑：程序博客网时间：2024/06/05 10:27
其实轮播的代码很简单只需要20多行jq代码就可以实现了
以下便是简单轮播的代码：
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>    <style type="text/css">    *{          padding: 0;        margin: 0;    }    </style>    <style type="text/css">#banner {    position:relative;    width:1048px;    height:588px;    overflow:hidden;}#banner_list img {    border:0px;    }#banner_bg {    position:absolute;     bottom:0;     background-color:#000;     height:30px;filter: Alpha(Opacity=30);     opacity:0.3;z-index:1000;    cursor:pointer;    width:478px;}#banner_info{      position:absolute;      bottom:0;      left:5px;      height:22px;      color:#fff;      z-index:1001;      cursor:pointer}#banner_text {    position:absolute;    width:120px;    z-index:1002;     right:3px;     bottom:3px;    }#banner ul {    position:absolute;    list-style-type:none;    filter: Alpha(Opacity=80);    opacity:0.8;     border:1px solid #fff;    z-index:1002;    margin:0;     padding:0;     bottom:3px;     right:5px;    }#banner ul li {     padding:0px 8px;     float:left;     display:block;     color:#FFF;     border:#e5eaff 1px solid;     background:#6f4f67;     cursor:pointer;     }#banner ul li.on {     background:#900;    }#banner_list a{    position:absolute;    } <!-- 让四张图片都可以重叠在一起--></style>    <script type="text/javascript">        var t=0;        var y=12,n=0;        $(function(){            /*定时器，每隔两秒跳转一个图片*/            t = setInterval("showAuto()", 2000);            $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});/*悬浮在图片上时，停止跳转*/            $("#banner li").click(function(){/*点击某个li            跳转到相应的图片*/                n=$(this).text()-1;                console.log(n);                showAuto();            });        });        function showAuto(){            if(y<15){            y=12+n;            var i=$(".top li").eq(n).css({background:'red',color:'#FFF'},);            $(".top li").filter(':not(:eq('+n+'))').css({background:'#6f4f67',color:'#FFF'});/*进行图片的过滤，并附上css属性*/            console.log(i);            n++;            console.log(n);            }else{                y=12;                n=0;            }            $("#img").attr('src','img/p'+y+'.jpg');/*加载图片*/    }    </script>    <body>        <div class="main">            <div class="top">                <div id="banner">                    <ul>                    <li class="on">1</li>                    <li>2</li>                    <li>3</li>                    <li>4</li>                    </ul>                    <div id="banner_list">                        <a href="#"><img src="img/p15.jpg" id="img"/></a>                    </div>                </div>            </div>        </div>    </body></html>
效果图如下这里写图片描述
阅读全文
0 0