JQ轮播图

最新推荐文章于 2021-04-22 11:32:02 发布

原创最新推荐文章于 2021-04-22 11:32:02 发布 · 314 阅读

1 ·

CC 4.0 BY-SA版权

制作轮播图有基本的四种方式：CSS3、JS、JQ、swiper

以下介绍基于JQ库的轮播图

先上HTML代码，分析一下结构：

<body>
    <div class="pic">
        <div class="content">              <!--用一个盒子装轮播内容-->
            <img src="../images/chanpin3.png" alt="">
            <img src="../images/chanpin2.png" alt="">
            <img src="../images/chanpin3.png" alt="">  
            <img src="../images/chanpin2.png" alt="">
            <img src="../images/chanpin3.png" alt="">
            <img src="../images/chanpin2.png" alt="">
            <img src="../images/chanpin3.png" alt="">
        </div>
        <ul class="index">            <!--ul和li-->
            <li class="first"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="right">></div>   <!--左右按钮-->
        <div class="left"><</div>
    </div>
</body>

CSS代码：

用一个盒子专门装轮播的内容，这个盒子可以比他的父盒子pic要大很多，这样就可以让图片随意调整大小。导航点（下面的那一排）和左右两个按钮与轮播内容是兄弟关系。通过子绝父相的方式可以让他们定位。

    .pic{
            width: 790px;
            height: 340px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;  /*关键点：溢出隐藏*/
        }
        .content{
            width: 99999px;     /*保证内盒子比父盒子要大*/
            height: 340px;
            position: absolute;
            left: 0px;
            top: 0px;

        }
        .content img{
            float: left; /*设定浮动并且调整轮播图片的大小*/
            width: 790px;    
            height: 340px;
        }
        .index{
            position: absolute;  /*子绝父相，轮播图下面的小点点*/
            left: 300px;
            bottom: 5px;
            width: 200px;
            height: 20px;
            list-style: none;
        }
        .index li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
            background-color: rgba(100,100,100,0.3);
        }

        .left{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);  
            position: absolute;
            left: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .right{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);  
            position: absolute;
            right: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .index .first{
            background-color: red;
        }

JS及JQ：

JQ用的是3.3.1未压缩版本

    <script type="text/javascript">
        $(function(){
            //每个固定的时间移动图片
            var timer = setInterval(picLoop,10000);//以毫秒计时周期运行函数
            var index = 0;
            function picLoop(){
                index++;
                if (index==8) {index=0;}
                $(".content").animate({"left":-790*index},300);//animate方法自定义动画，300是动画速度
                $("li").eq(index).css("background-color","red")//eq方法遍历，index参数传递下标，从0开始
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
                       //siblings方法选中所有同胞元素，将他们变成灰色
            }

            //定时器的控制
            $(".pic").hover(function(){ //鼠标停留时
                clearInterval(timer);//停止计时
                $(".left").show();
                $(".right").show();
            },function(){
                timer = setInterval(picLoop,1000);
                $(".left").hide();
                $(".right").hide();
            })

            $("li").mouseover(function(){
                $(this).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
                index = $(this).index();
                $(".content").animate({"left":-790*index},300);

            })

            $(".left").click(function(){   //点击事件
                index--;
                if (index==-1) {index=7;}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
            })
            $(".right").click(function(){
                index++;
                if (index==8) {index=0}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");    
            })


        })
    </script>