jquery简单轮播图实现

最新推荐文章于 2024-09-28 11:04:27 发布

程序员码蚱

最新推荐文章于 2024-09-28 11:04:27 发布

阅读量3.1k

点赞数

分类专栏： jquery 文章标签： jquery 轮播图

本文链接：https://blog.csdn.net/qq_36832411/article/details/77414892

版权

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

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