基于面向对象的轮播图

最新推荐文章于 2020-03-09 20:44:58 发布

TAT0_0

最新推荐文章于 2020-03-09 20:44:58 发布

阅读量400

点赞数

本文链接：https://blog.csdn.net/yesbuy201701/article/details/73916671

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            body {
                width: 640px;
                height: 340px;
                padding: 100px;
            }

            img {
                display: block;
            }

            #box {
                width: 620px;
                height: 340px;
                position: relative;
                overflow: hidden;
                box-shadow: 0 0 10px rgba(0, 0, 0, .8);
            }

            #imgs {
                width: 2480px;
                height: 340px;
                position: absolute;             
            }

            #imgs li {
                width: 620px;
                height: 340px;
                float: left;
            }

            #scroll {
                position: absolute;
                bottom: 10px;
                right: 40%;
            }

            #scroll li {
                float: left;
                display: block;
                width: 10px;
                height: 8px;
                border-radius: 8px;
                background: lightgray;
                margin-right: 10px;
                box-shadow: 0 0 5px rgba(0, 0, 0, .8);
            }

            #scroll li.active {
                width: 30px;
            }

            #btn {
                position: relative;
                top: 40%;
                width: 620px;
                height: 50px;               
            }

            #btn span {
                float: left;
                display: block;
                width: 27px;
                height: 50px;               
                cursor: pointer;                
            }

            #left {
                display: none;              
                position: absolute;
                left: 0;
                background: url(img/bg_24.png) 54px 0;
            }

            #right {
                display: none;              
                position: absolute;
                right: 0;
                background: url(img/bg_24.png) 81px 0;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <ul id="imgs">
                <li><img src="img/1.jpg" /></li>
                <li><img src="img/2.jpg" /></li>
                <li><img src="img/3.jpg" /></li>
                <li><img src="img/4.jpg" /></li>
            </ul>
            <ul id="scroll">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="btn">
                <span id="left"></span>
                <span id="right"></span>
            </div>
        </div>
    </body>
    <script>
        function Tab(id) {
            var oBox = document.getElementById(id);
            this.oImgs = oBox.getElementsByTagName('ul')[0];
            this.oImgs.innerHTML += this.oImgs.innerHTML;
            this.oLi = this.oImgs.getElementsByTagName('li');
            this.oUl = oBox.getElementsByTagName('ul')[1];
            this.aLi = this.oUl.getElementsByTagName('li');         
            this.oLeft = oBox.getElementsByTagName('span')[0];
            this.oRight = oBox.getElementsByTagName('span')[1];
//          this.oW = this.oLi[0].offsetWidth;
            this.now = 0;
            this.timer = null;
            var _this = this;

            //向左
            this.oLeft.onclick = function(){
                _this.prev();
            }

            //向右
            this.oRight.onclick = function(){
                _this.next();
            }

            //鼠标移入
            oBox.onmousemove = function(){
                _this.over();
            }

            //鼠标移出
            oBox.onmouseout = function(){
                _this.out();
            }
        }

        //方法
        //获取ul的宽度
        Tab.prototype.w = function() {
            return this.oImgs.style.width = this.oLi[0].offsetWidth * this.oLi.length + 'px';
        }

        //小圆点的状态
        Tab.prototype.show = function() {           
            for (i = 0; i < this.aLi.length; i++) {
                this.aLi[i].className = '';             
            }
            this.aLi[this.now].className = 'active';            
            this.oImgs.style.left = -this.oLi[0].offsetWidth * this.now + 'px';
            if (this.oImgs.style.left <= -this.oImgs.style.width / 2) {
                this.oImgs.style.left = '0';
            }
        }
        //点击圆点，显示对应的图片
        Tab.prototype.dot = function() {
            var _this = this;
            for (var i = 0; i < this.aLi.length; i++) {             
                this.aLi[i].index = i;              
                this.aLi[i].onclick = function() {
                    _this.now = this.index;
                    _this.show();
                }
            }
        }

        //向左
        Tab.prototype.next=function(){
            var _this = this;
            _this.now++
            if (_this.now > this.oLi.length/2 - 1) {
                _this.now = 0;
            }
            _this.show();
        }

        //向右        
        Tab.prototype.prev=function(){
            var _this = this;
            _this.now--
            if (_this.now < 0) {
                _this.now = this.oLi.length/2 - 1;
            }
            _this.show();
        }

        //自动轮播
        Tab.prototype.auto=function(){
            var _this = this;
            this.timer = setInterval(function() {
                _this.next();
            }, 2000);
        }

        //鼠标移入
        Tab.prototype.over=function(){
            clearInterval(this.timer);
            this.oLeft.style.display = 'block';
            this.oRight.style.display = 'block';
        }       

        //鼠标移出
        Tab.prototype.out=function(){
            this.auto();
            this.oLeft.style.display = 'none';
            this.oRight.style.display = 'none';
        }

        //实例
        var tt = new Tab('box');
        tt.w();     
        tt.dot();
        tt.next();
        tt.prev();
        tt.auto();
        tt.over();
        tt.out();

    </script>

</html>

TAT0_0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于面向对象的轮播图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0;
复制链接

扫一扫