轮播图插件2

最新推荐文章于 2024-07-17 00:08:06 发布

最淑女的程序媛

最新推荐文章于 2024-07-17 00:08:06 发布

阅读量141

点赞数 1

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

本文链接：https://blog.csdn.net/yingayinga/article/details/84839875

版权

插件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> 
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1120px;
            height: 380px;
            margin: 40px auto;
            position: relative;
            overflow: hidden;
        }
        li{
            list-style-type: none;
        }
        .container ul li {
            width: 1120px;
            height: 380px;
            line-height: 380px;
            text-align: center;
            font-size: 100px;
            float: left;
        }
        .container ul li.active{
            z-index: 2;
            opacity: 1;
        }
        .container ul li.prev{
            z-index: 1;
        }
        .container ul{
            position: relative;
            z-index: 0;
        }
        #btn{
            width:100%;
            height: 40px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            z-index: 1;
        }
        #btn span{
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background: rgba(0,0,0,.6);
            text-align: center;
            color: #fff;
            font-size: 20px;
        }
        #btn span:first-child{
            float: left;
        }
        #btn span:last-child{
            float: right;
        }
        #btnlist {
            position: absolute;
            z-index: 1;
            top: 80%;
            height: 20px;
            width: 100%;
            text-align: center;
            margin-left: -10px;
        }
        #btnlist span{
            width: 20px;
            height: 20px;
            display: inline-block;
            background:rgba(0,0,0,.3);
            border-radius: 50%;
            margin-left: 20px;
            transition: all .5s;
        }
        #btnlist span.active{
            background:#ddd;
            box-shadow: 0 0 5px #000;
            width: 18px;
            height: 18px;
            margin-left: 21px;
            margin-top: 1px;
        }
        #list{
            width:6720px;
        }
        #list li{
           float:left;
        }
    </style>
</head>
<body>
        <div class="container" id="container">
                <ul id="list">
                    <li style="background: brown">1</li>
                    <li style="background: pink">2</li>
                    <li style="background: orange">3</li>
                    <li style="background: greenyellow">4</li>
                    <li style="background: lightblue">5</li>
                    <li style="background: brown">1</li>
                </ul>
                <div id="btn">
                    <span class="left"><<</span>
                    <span class="right">>></span>
                </div>
                <div id="btnlist">
                     <span class="active"></span>
                     <span></span>
                     <span></span>
                     <span></span>
                     <span></span>
                </div>
            </div>

    <script src="move.js"></script>
    <script>
        // 1. 选择元素 
        //   当程序初始化的时候;
        // 2. 绑定事件 
        //   绑定事件功能;
        // 3. 事件处理函数;
        //   index;
        //   animate;
        
        function Banner(){

        }
        Banner.prototype.init = function(itemlistselector,options){
            // options = {
            //     leftselector:"",
            //     rightselector:"",
            //     btnlistselector:"",
            //     listMainselector:"";
            // }

            // 左右按钮选择 => 1. 选择正确为 dom对象; 2. 选择错误为null;
            this.index = 0;
            this.leftBtnElem = document.querySelector(options.leftselector);
            this.rightBtnElem = document.querySelector(options.rightselector);
            // 按钮列表 => 1. 选择正确为 dom组(伪数组) 2. 选择错误为 null;

            this.btnlist = document.querySelectorAll(options.btnlistselector);

            // 显示图片列表;
            this.itemlist = document.querySelectorAll(itemlistselector); // *
            
            this.listMain = document.querySelector(options.listMainselector);

            this.handleEvent();
            //所有逻辑的起始点;
        }
        Banner.prototype.handleEvent = function(){
            // 事件绑定功能;
            if(this.leftBtnElem != null){
                this.leftBtnElem.onclick = function(){
                  
                    this.changIndex("prev");
                    this.changItem();
                }.bind(this);
            } 
            if(this.rightBtnElem != null){
                this.rightBtnElem.onclick = function(){
                   
                    this.changIndex("next");
                    this.changItem("next");
                }.bind(this);
            } 

            if(this.btnlist != null){
                for(var i = 0 ; i < this.btnlist.length ; i++){
                    (function(index){
                        this.btnlist[i].onmouseover = function(){
                            this.changIndex("moveTo",index);
                            this.changItem("moveTo",index);
                        }.bind(this)
                    }.bind(this))(i)
                }
            }                   
        }
        Banner.prototype.changIndex = function(type,i){
            if(type === "prev"){
                // index --
                if(this.index == 0){
                    console.log(this.itemlist[0].offsetWidth , (this.itemlist.length - 1) );
                    this.listMain.style.left = -this.itemlist[0].offsetWidth * (this.itemlist.length - 1) + "px";
                    this.index = this.itemlist.length - 2;
                }else{
                    this.index --;
                }
            }else if(type === "next"){
                if(this.index == this.itemlist.length - 1){
                    this.listMain.style.left = 0;
                    this.index = 1;
                }else{
                    this.index ++;
                }
            }else if(type === "moveTo"){
                // this.index = this.index;
                this.index = i;
            }
            // console.log(this.index);
        }

        Banner.prototype.changItem = function(){
            //运动;
            this.moving = true;
            move(this.listMain,{
                left : -this.itemlist[0].offsetWidth * this.index
            });
            
            if(this.btnlist != null){
                for(var k = 0 ; k < this.btnlist.length ; k++){
                    this.btnlist[k].className =  this.btnlist[k].className.replace("active","");
                }

                if(this.index > this.btnlist.length - 1){
                    this.btnlist[0].className = "active";
                }else{
                    this.btnlist[this.index].className = "active";
                }
            }
        }

        var banner = new Banner();
        banner.init("#list li",{
            leftselector:".left",
            rightselector:".right",
            listMainselector:"#list",
            btnlistselector:"#btnlist span"
        });
    </script>
</body>
</html>

这个代码注释没有第一篇轮播图插件详细
(可参考第一篇轮播图插件)

最淑女的程序媛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图插件2

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫