jquery插件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .swiper{
                width: 1000px;
                height: 500px;
                margin: 0 auto;
                position: relative;
            }
            .imgList,.imgList img{
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: all 0.5s;
            }
            .imgList{
                position: relative;
            }
            .imgList img{
                position: absolute;
                left: 0;
                top: 0;
            }
            .leftbtn:hover,.rightbtn:hover{
                background: rgba(0,0,0,0.7);
                color: #fff;
            }
            .leftbtn{
                width: 100px;
                height: 70px;
                line-height: 70px;
                text-align: center;
                position: absolute;
                top: 50%;
                margin-top: -35px;
                left: 0%;
                background: rgba(0,0,0,0);
                font-size: 20px;
                color: #999;
                z-index: 100;
            }
            .rightbtn{
                width: 100px;
                height: 70px;
                line-height: 70px;
                text-align: center;
                position: absolute;
                top: 50%;
                margin-top: -35px;
                right: 0%;
                background: rgba(0,0,0,0);
                font-size: 20px;
                color: #999;
                z-index: 100;
            }
            
            
            .circleList{
                position: absolute;
                width: 200px;
                height: 100px;
                display: flex;
                right: 0px;
                bottom: 0px;
                justify-content: center;
                align-items: center;
                z-index: 100;
            }
            
            .circle{
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                border: 5px solid #333;
                background: #999;
            }
            
            .imgList,.imgList img.active{
                z-index: 10;
                opacity: 1;
            }
            
            
            .swiper .circle.active{
                background: #fff;
            }
        </style>
    </head>
    
        
        
            
    
    

    <body>
        <h1>helloworld</h1>
        
        
        <div class="swiper">
            <div class="imgList">
                <img src="img/swiper1.jpg" class="active" alt="" />
                <img src="img/swiper2.jpg" alt="" />
                <img src="img/swiper3.jpg" alt="" />
                <img src="img/swiper4.jpg" alt="" />
                <img src="img/swiper5.jpg" alt="" />
            </div>
            <div class="btn">
                <div class="leftbtn">&lt;</div>
                <div class="rightbtn">&gt;</div>
            </div>
            
            <div class="circleList">
                <span class="circle active"></span>
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
            </div>
        </div>
        <script type="text/javascript">
//            $('h1').bgPink()
//            $.lunbo()


////两个方法加入$
//$.fn.extend()
//$.extend(true, target object, object1);

            $.fn.extend({
                bgPink:function(){
                    console.log(this)
                    this.css({
                        color:'red',
                    })
                    console.log('调用bgPink')
                }
            })
            
            $('h1').bgPink()
                        
            
            $.extend({
                lunbo:function(){
                        //获取图片到底有多少张，有多少张生成多少个小圆点
            var imgList = document.querySelectorAll('.imgList img')
            //获取swiper元素对象，方便后面追加circleList对象
            var swiper = document.querySelector('.swiper')
            
            //创建circleList对象
            var circleList = document.createElement('div');
            //给定circleList对象的类名
            circleList.className = 'circleList'
            
            for(var i=0;i<imgList.length;i++){
                //生成相对应个数的span小圆点
                var itemCircle = document.createElement('span')
                itemCircle.className = 'circle'
                circleList.appendChild(itemCircle)
            }
            swiper.appendChild(circleList)
            
            
            var leftBtn = document.querySelector('.leftbtn')
            var rightBtn = document.querySelector('.rightbtn')
            
            //currentPage保存当前是第几张图的数据
            var currentPage = 0
//            console.log([circleList])
            circleList.children[currentPage].className = 'circle active'
            
            rightBtn.onclick = function(){
                //先还原当前的类名
                imgList[currentPage].className = ''
                circleList.children[currentPage].className = 'circle'
                currentPage = currentPage + 1;
                //根据是否超出范围判断，当前轮播具体的第几张图
                if(currentPage<imgList.length){
                    imgList[currentPage].className = 'active'
                    circleList.children[currentPage].className = 'circle active'
                }else{
                    currentPage = 0
                    imgList[currentPage].className = 'active'
                    circleList.children[currentPage].className = 'circle active'
                }
                
            }
            
            
            leftBtn.onclick = function(){
                imgList[currentPage].className = ''
                circleList.children[currentPage].className = 'circle'
                currentPage = currentPage - 1;
                if(currentPage>=0){
                    imgList[currentPage].className = 'active'
                    circleList.children[currentPage].className = 'circle active'
                }else{
                    currentPage = imgList.length-1
                    imgList[currentPage].className = 'active'
                    circleList.children[currentPage].className = 'circle active'
                }
            }
                    console.log('这是个轮播')
                }
            
            });
            
//            $.lunbo()
        </script>
    </body>
</html>
posted @ 2019-03-18 21:18 就这样子吧阅读(104) 评论(0) 收藏举报
刷新页面返回顶部
就这样子吧

jquery插件

公告
