原创

jquery轮播图简单实现


其实轮播的代码很简单只需要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>

效果图如下这里写图片描述

正文到此结束