幫豬豬修修改的程式碼2016年的程式碼記錄

谢双元小号發表於2024-06-16

這是一個圖片輪播的程式碼，但是它們的是css 動畫，當時程式碼執行不了，我花了二天才修改，現在記錄一下，憑回憶用。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>網易科技</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">  
    <style>  
        body, div, header, footer, strong, ul, li, span, h1, h2, a, img {  
            margin: 0;  
            padding: 0;  
            outline: none;  
            border: none;  
            font-family: "Microsoft Yahei", "微軟雅黑", Tahoma, Arial, Helvetica, STHeiti;  
        }  
        body, html {  
            min-height: 100%;  
        }  
        ol, ul {  
            list-style: none;  
        }  
        /* 其他樣式... */  
        .header {  
            height: 32px;  
            line-height: 32px;  
            background: #FC9;  
            text-align: center;  
            color: #F00;  
            font-size: 1em;  
        }  
        .nav, .footer-menu { /* 修正類名為 footer-menu */  
            display: block;  
            padding: 10px 0;  
        }  
        .nav a, .footer-menu a {  
            display: inline-block;  
            width: 30%;  
            padding: 3px;  
            text-decoration: none;  
            -webkit-box-sizing: border-box;  
            text-align: center;  
        }  
        .nav a:hover {  
            border-radius: 5px;  
            background: #C60;  
            color: #FFF; /* 移除重複的顏色宣告 */  
        }  
        /* 其餘樣式... */  
        #get-item a {  
            border-radius: 10px; /* 修正屬性名為 border-radius */  
            /* 其他樣式... */  
        }  
        /* 其餘樣式... */  
    </style>  
</head>  
<body>  
    <!-- Header -->  
    <header class="header">潮陽商城</header>  
  
    <!-- Navigation -->  
    <nav class="nav">  
        <a href="javascript:;">產品</a>  
        <a href="javascript:;">商家</a>  
        <a href="javascript:;">關於</a>  
    </nav>  
  
    <!-- Slide -->  
    <div class="slide" id="hotSlide">  
        <div class="slide-main" id="mainContent">  
            <!-- Slide images -->  
        </div>  
        <div id="get-item">  
            <!-- Pagination dots -->  
        </div>  
    </div>  
  
    <!-- Hot List -->  
    <ul class="hot-list">  
        <!-- List items -->  
    </ul>  
  
    <!-- Click More -->  
    <a href="javascript:;" class="click-more">檢視更多</a>  
  
    <!-- Class Info -->  
    <div class="class-info">  
        <!-- Class info content -->  
    </div>  
  
    <!-- Download App -->  
    <a href="javascript:;" class="downapp">  
        <img src="images/xiazai.png" alt="下載應用">  
    </a>  
  
    <!-- Footer Function Menu -->  
    <nav class="footer-menu">  
        <a href="javascript:;">高檔版</a>  
        <a href="javascript:;">高檔版</a>  
        <a href="javascript:;">高檔版</a>  
    </nav>  
  
    <!-- Footer -->  
    <footer class="footer">網易提意見</footer>  
  
    <script>  
   var hotSlide = {
            hasProtoType: false,
            newClass: function (ele) {
                ele = ele || {};
                if (this.hasProtoType == false) {
                    this.init.prototype = hotSlide;
                    this.hasProtoType = true;
                }
                return new this.init(ele);
            },
            getId: function (id) {
                return typeof id == 'string' ? document.getElementById(id) : id;
            },
            prevPage: function () {
                if (this.item == 0) {
                    this.item = this.lengths;
                }
                this.item--;
                this.mainAnimate(this.item);
                this.curAnimate(this.item);
            },
            nextPage: function () {
                this.item++;
                if (this.item == this.lengths) {
                    this.item = 0;
                }
                this.mainAnimate(this.item);
                this.curAnimate(this.item);
            },
            bindEvent: function () {
                var myThis = this;
                var eleEvent = myThis.getId('hotSlide');
                eleEvent.addEventListener('touchstart', function (e) {
                    myThis.initPage.x = e.changedTouches[0].pageX;
                    myThis.initPage.y = e.changedTouches[0].pageY;
                }), eleEvent.addEventListener('touchmove', function (e) {
                    myThis.endPage.x = e.changedTouches[0].pageX;
                    myThis.endPage.y = e.changedTouches[0].pageY;
                    var xcurPage = myThis.endPage.x - myThis.initPage.x - myThis.item * myThis.winWidth;
                    myThis.mainContent.style.webkitTransform = 'translate3d(-' + xcurPage + 'px, 0, 0)';
                }), eleEvent.addEventListener('touchend', function (e) {
                    if (Math.abs(myThis.endPage.x - myThis.initPage.x) > 50) {
                        if (myThis.endPage.x - myThis.initPage.x < 0) {
                            myThis.prevPage();
                        } else {
                            myThis.nextPage();
                        }
                    } else {
                        myThis.mainContent.style.webkitTransform = 'translate3d(' + myThis.item * myThis.winWidth + 'px, 0, 0)';
                    }
                })
            },
            mainAnimate: function () {
                var _this = this;
                _this.mainContent.style.webkitTransition = '0.4s';
                _this.mainContent.style.webkitTransform = "translate3d(-" + (_this.item * _this.winWidth) + "px, 0, 0)";
            },
            curAnimate: function (getItem) {
                for (var k = 0; k< this.getItem.length; k++) {
                    this.getItem[k].className = '';
                }
                this.getItem[getItem].className = 'cur';
            },
            init: function (ele) {
                var _this = this;
                _this.item = 0;
                _this.hotSlide = _this.getId('hotSlide');
                _this.mainContent = _this.getId('mainContent');
                _this.slideCont = _this.mainContent.getElementsByTagName('div');
                _this.winWidth = window.innerWidth;
                _this.lengths = _this.slideCont.length;
                for (var i = 0; i < _this.lengths; i++) {
                    _this.slideCont[i].style.width = _this.winWidth + 'px';
                }
                _this.getItem = _this.getId('get-item').getElementsByTagName('a');
                _this.initPage = { x: 0, y: 0 }
                _this.endPage = { x: 0, y: 0 }
                _this.bindEvent(ele);
            }
        };
        pageObj = { wrap: 'slide' }
        hotSlide.newClass(pageObj);
      
    </script>  
</body>  
</html>

　

相關文章