jquery 轮播图

初学者学徒

于 2019-12-11 07:55:41 发布

阅读量218

点赞数 1

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

本文链接：https://blog.csdn.net/mrz123123123/article/details/103485871

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我编写了一轮播图，可以实现点击左右切换图片，点击数字切换相对应的照片代码如下
其中不算完美的地方，还请各位大神评论平论
只要更改一下图片就可以了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
    *{
        margin:0;
        padding:0;
    }
        .bannder{
            width:790px;
            margin:100px auto;
            position:relative;
        }
        .bannder>.img>li{
            position:absolute;
            top: 0;
            list-style: none;
            display:none;
        }
        .bannder>.img>li:nth-of-type(1){
            display: block;
        }
        .arr{

        }
        .arrder>span{
            position:absolute;
            width:20px;
            height: 100px;
            margin-top:150px;
            background:rgba(25, 25, 25, 0.7);
            line-height:100px;
            display: none;
        }
        .bannder:hover .arrder>span{
            display:block;
        }
        .arrder>.left{
            left:0;
        }
        .arrder>.right{
            right: 0;
        }
        .num{
            position:relative;
            top:270px;
        }
        .num>li{
            list-style: none;
            border-right:50%;
            background:#9999;
            line-height:30px;
            float: left;
            margin-left:20px;

        }
        .num>li:nth-of-type(1){
           background:red;
        }

    </style>
</head>
<body>
    <div class="bannder">
        <ul class="img">
            <li><img src="img/1.jpg" alt="" /></li>
            <li><img src="img/2.jpg" alt="" /></li>
            <li><img src="img/3.jpg" alt="" /></li>
            <li><img src="img/4.jpg" alt="" /></li>
            <li><img src="img/5.jpg" alt="" /></li>
            <li><img src="img/6.jpg" alt="" /></li>
            <li><img src="img/7.jpg" alt="" /></li>
            <li><img src="img/8.jpg" alt="" /></li>
        </ul>
        <ul class="num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <div class="arrder">
            <!--                左箭头 -->
            <span class="left">&lt;</span>
            <!--                右箭头 -->
            <span class="right">&gt;</span>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script>
        $(document).ready(function(){
            var count=0;
            $(".right").click(function(){
                count++;
                if(count==$(".img li").length) {
                  count = 0;
              }
               $(".img li").eq(count).fadeIn().siblings("li").fadeOut();
               $(".num li").eq(count).css({
                "background":"red"
               }).siblings('li').css({
                "background":"#9999"
               })
          });
            $(".left").click(function(){
                count--;
                if(count==-1){
                    count=$(".img li").length-1;
                }
                $(".img li") .eq(count).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(count).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
            //                    引用的函数
            var time=setInterval(counts,2000)//定时器  自动轮播
            // 引用的函数
            function counts() {
                count++;
                if(count==$(".img li").length){
                    count=0;
                }
                $(".img li").eq(count).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(count).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            };
            //鼠标移入  清除定时器
            $(".bannder").hover(function(){
                clearInterval(time);
            },function(){
                time=setInterval(counts,2000);
            });
            $(".num li").eq(0).click(function(){
                $(".img li").eq(0).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(0).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
            $(".num li").eq(1).click(function(){
                $(".img li").eq(1).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(1).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
            $(".num li").eq(2).click(function(){
                $(".img li").eq(2).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(2).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
            $(".num li").eq(3).click(function(){
                $(".img li").eq(3).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(3).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
            $(".num li").eq(4).click(function(){
                $(".img li").eq(4).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(4).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
            $(".num li").eq(5).click(function(){
                $(".img li").eq(5).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(5).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
            $(".num li").eq(6).click(function(){
                $(".img li").eq(6).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(6).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
            $(".num li").eq(7).click(function(){
                $(".img li").eq(7).fadeIn().siblings("li").fadeOut();
                $(".num li").eq(7).css({
                    "background":"red"
                }).siblings("li").css({
                    "background":"#999"
                })
            })
        });

    </script>
</body>
</html>