无缝轮播封装

最新推荐文章于 2024-11-09 22:50:54 发布

MiyaFairyland

最新推荐文章于 2024-11-09 22:50:54 发布

阅读量85

点赞数

文章标签： html css js jquery javascript

本文链接：https://blog.csdn.net/m0_57091576/article/details/115942519

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 500px;
            height: 200px;
            border: 1px solid #000;
            padding: 5px;
            margin: 50px auto;
        }
        #box>.inner{
            width: 500px;
            height: 200px;
            position: relative;
            overflow: hidden;

        }
        #box>.inner>ul{
            width: 3000px;
            height: 200px;
            list-style: none;
            position: absolute;
        }
        #box>.inner>ul>li{
            float: left;
            width: 500px;
            height: 200px;
        }
        #box>.inner>ol{
            list-style: none;
            position: absolute;
            right: 30px;
            bottom: 20px;
        }
        #box>.inner>ol>li{
             width: 25px;
             height: 25px;
             border-radius: 50%;
             background-color: #fff;
             text-align: center;
             line-height: 25px;
             margin-right: 5px;
            float: left;
         }
        #box>.inner>ol>li.current{
            background-color: orangered;
            color: white;
        }
        #box>.inner>.control{
            display: none;

         }
        #box>.inner>.control>span{
            display: inline-block;
            width: 32px;
            height: 32px;
            position: absolute;
            bottom: 50%;
            margin-bottom: -16px;

         }
        #box>.inner>.control>span.left{
            left: 0;
            background: url("image/right.png");
        }
        #box>.inner>.control>span.right{
            right: 0;
            background: url("image/left.png");
        }


    </style>


</head>

<div id="box">
    <div class="inner">
        <ul class="slide">
            <li><img src="image/1.jpg" alt=""></li>
            <li><img src="image/2.jpg" alt=""></li>
            <li><img src="image/3.jpg" alt=""></li>
            <li><img src="image/4.jpg" alt=""></li>
            <li><img src="image/5.jpg" alt=""></li>
        </ul>
        <ol class="pagination">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <div class="control">
            <span class="left"></span>
            <span class="right"></span>
        </div>
    </div>
</div>

//必须要引入jq框架
<script src="jquery-1.11.1.js"></script>
<script>
    $.fn.lunbo=function(circleClass){
   			 //利用class来找元素,所以大容器的class必须是slide
        var $slide=this.find(".slide");
        var moveWidth=$slide.children().eq(0).width();
        $slide.css("width",($slide.children().length+1)*moveWidth);
        $slide.append($slide.children().eq(0).clone());


		//利用class来找元素,小圆点的class必须是pagination
        var $pagination=this.find(".pagination");
        //按钮的class必须是control
        var $control=this.find(".control");

        var boo_circle=$pagination.length!=0;
        var boo_control=$control.length!=0;

        var index=0;
        var circleIndex=0;

		//自动轮播
         timer=setInterval(autoPlay,2000)

        //按钮轮播

        this.hover(function () {
            clearInterval(timer)
            if (boo_control){
                $control.show()
            }

        },function () {
            timer=setInterval(autoPlay,2000)
            if (boo_control){
                $control.hide()
            }

        })

        if (boo_control){
            $control.children().eq(0).click(function () {
                index--;
                if (index<0){
                    index=$slide.children().length-2;
                    $slide.css("left",-($slide.children().length-1)*moveWidth)
                }
                $slide.stop().animate({
                    left:-index*moveWidth,
                },200)

                 circleIndex--
                 switchCircle()

            })
            $control.children().eq(1).click(function () {
                autoPlay()

            })
        }

        //点击轮播
        if (boo_circle){
            $pagination.children().click(function () {
                if (index==$slide.children().length-1){
                    $slide.css("left",0)
                }
                index=circleIndex=$(this).index()
                switchCircle();

                $slide.stop().animate({
                    left:-index*moveWidth
                },200)
            })


        }



        function switchCircle() {
             if (!boo_circle)return
             if (circleIndex>$pagination.children().length-1){
                 circleIndex=0
             }
             if (circleIndex<0){
                 circleIndex=$pagination.children().length-1
             }

             $pagination.children().eq(circleIndex).addClass(circleClass)
            .siblings().removeClass(circleClass)

        }
        function autoPlay() {
            index++;
            if (index>$slide.children().length-1){
                index=1;
                $slide.css("left",0)
            }
            $slide.stop().animate({
                left:-index*moveWidth,
            },200)

             circleIndex++
             switchCircle()


        }

    }


    $("#box").lunbo("current")
</script>
</body>
</html>