文章/答案/技术大牛

发布

社区首页 >问答首页 >交互式滑块

问交互式滑块
EN

Code Review用户

提问于 2014-03-19 22:48:27

回答 1查看 848关注 0票数 6

任务：

创建一个交互式滑块，允许用户查看给定的图片库。

滑翔机控件：

见上一张幻灯片
见下一张幻灯片
快速浏览图像/寻呼-过渡到任意幻灯片

对象幻灯片的

属性：

图像
标题
描述
链接

设置滑块：

容器-DOM元素滑块
图像、链接、标题和描述的数组
电流滑动
车削之间的延时
车削速度
宽度滑块
高度滑块
显示/隐藏标题的标志
显示/隐藏描述的标志
标志开启/关闭自动旋转滑梯
下一个/下一个幻灯片显示/隐藏按钮的标志
显示/隐藏导航条滑块/分页的标志
完全革命计数器

方法滑块：

生成滑块
启动自动播放
转到幻灯片№x
下一张幻灯片
前一张幻灯片

Requirements:

使用常规设置页面样式创建文件default.css样式
创建带有参数slider.css样式(特别是滑块)的文件
为大多数slider.js滑块创建一个文件
滑块的宽度和高度不应在样式文件中描述，而应从对象参数滑块中提取。
初始化命令发生滑块变量slider1 =滑块(参数)，导致slider1 -将受上述属性和方法的制约。
动画滑块应通过CSS3进行:转换:左/边距
只使用纯JavaScript

P.s.我是一个年轻的程序员，所以我想听听对进一步开发的真正评论。

HTML:

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">

    window.onload = function () {

            var arrImgs = ["images/bigImg1.jpg", "images/bigImg2.jpg", "images/bigImg3.jpg", "images/bigImg4.jpg", "images/bigImg5.jpg", "images/bigImg6.jpg"];
            var arrTitles = ["Title1", "Title2", "Title3", "Title4", "Title5", "Title6"];
            var arrDescriptions = ["Description1", "Description2", "Description3", "Description4", "Description5", "Description6"];
            var arrLinks = ["#", "#", "#", "#", "#", "#"];

            var arrSlideProperties = [arrImgs, arrTitles, arrDescriptions, arrLinks];

            var sliderOptions={
                containerForSlider: ".container",
                widthSlider:790,
                heightSlider:450,
                slideProperties:arrSlideProperties,
                showTitles: true,
                showDescriptions: true,
                showNextPrevButtons: true,
                showNavigationPanel: true,
                delayTime: 3000,
                speedTime: 2,
                autoRotate: false,
                fullCounter:0
            }

            var slider = Slider(sliderOptions);

    }

</script>

</head>
<body>
    <div class="container"><div>
</body>
</html>

JavaScript:

function Slider(sliderOpt) {

    var inteval = 0;
    var numSlide = 1;

    this.fullCounter = sliderOpt.fullCounter;

    (this.createSlider = function() {
        if (sliderOpt.containerForSlider.charAt(0) == ".") {
            var container = document.getElementsByClassName(sliderOpt.containerForSlider.substring(1, sliderOpt.containerForSlider.length))[0];
        }
        if (sliderOpt.containerForSlider.charAt(0) == "#") {
            var container = document.getElementById(sliderOpt.containerForSlider.substring(1, sliderOpt.containerForSlider.length));
        }
        container.style.width = sliderOpt.widthSlider + "px";
        container.style.height = sliderOpt.heightSlider + "px";
        container.style.border = "2px solid #808080";

        var innerContainer = document.createElement("ul");
        container.appendChild(innerContainer);
        innerContainer.className = "innerContainer";
        innerContainer.style.width = sliderOpt.widthSlider * sliderOpt.slideProperties[0].length + "px";
        innerContainer.style.height = sliderOpt.heightSlider + "px";

        for (var i = 0; i < sliderOpt.slideProperties[0].length; i++) {
            var li = document.createElement("li");
            innerContainer.appendChild(li);
            li.className = "slide";
            li.style.width = sliderOpt.widthSlider + "px";
            li.style.height = sliderOpt.heightSlider + "px";

            var a = document.createElement('a');
            li.appendChild(a);
            a.style.background = "url(" + sliderOpt.slideProperties[0][i] + ") no-repeat";

            (function(e) {
                a.onclick = function() {
                    location.href = sliderOpt.slideProperties[3][e];
                }
            })(i);

            if (sliderOpt.showTitles == true) {
                var title = document.createElement("div");
                a.appendChild(title);
                title.className = "title";
                title.style.width = sliderOpt.widthSlider + "px";
                title.innerHTML = sliderOpt.slideProperties[1][i];
            }

            if (sliderOpt.showDescriptions == true) {
                var title = document.createElement("div");
                a.appendChild(title);
                title.className = "description";
                title.style.width = sliderOpt.widthSlider + "px";
                title.style.marginTop = sliderOpt.heightSlider - 50 + "px";
                title.innerHTML = sliderOpt.slideProperties[2][i];
            }
        }

        if (sliderOpt.showNextPrevButtons == true) {
            var leftButton = document.createElement('a');
            container.appendChild(leftButton);
            leftButton.className = "leftButton";

            var rightButton = document.createElement('a');
            container.appendChild(rightButton);
            rightButton.className = "rightButton";
        }

        var navigationPanel = document.createElement('div');
        container.appendChild(navigationPanel);
        navigationPanel.className = "navigationPanel";

        for (var i = 0; i < sliderOpt.slideProperties[0].length; i++) {
            var navigationPanelButton = document.createElement('a');
            navigationPanel.appendChild(navigationPanelButton);
            navigationPanelButton.className = "navigationPanelButton";
            if (i == 0) navigationPanelButton.style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
        }


    })();

    (this.runAutoRotate = function() {
        if (sliderOpt.autoRotate == true) {
            var innerContainer = document.getElementsByClassName("innerContainer")[0];
            var navigationPanelButton = document.getElementsByClassName("navigationPanelButton");
            interval = setInterval(function() {
                if (numSlide == sliderOpt.slideProperties[0].length) {
                    innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.marginLeft = -40 + "px";
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                    numSlide = 1;
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
                    this.fullCounter++;
                    console.log(this.fullCounter); // counter full rotate(show console)
                } else {
                    innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * numSlide + "px";
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                    numSlide++;
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
                }
            }, sliderOpt.delayTime);
        }
    })();

    (this.prevSlideRotate = function() {
        var leftButton = document.getElementsByClassName("leftButton")[0];
        var innerContainer = document.getElementsByClassName("innerContainer")[0];
        var navigationPanelButton = document.getElementsByClassName("navigationPanelButton");

        leftButton.addEventListener("click", function() {
            if (sliderOpt.autoRotate == true) {
                clearInterval(interval);
            }
            if (numSlide == 1) {
                innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * (sliderOpt.slideProperties[0].length - 1) + "px";
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                numSlide = sliderOpt.slideProperties[0].length;
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
            } else {
                innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * (numSlide - 2) + "px";
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                numSlide--;
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
            }
        }, false);
    })();

    (this.nextSlideRotate = function() {
        var rightButton = document.getElementsByClassName("rightButton")[0];
        var innerContainer = document.getElementsByClassName("innerContainer")[0];
        var navigationPanelButton = document.getElementsByClassName("navigationPanelButton");

        rightButton.addEventListener("click", function() {
            if (sliderOpt.autoRotate == true) {
                clearInterval(interval);
            }
            if (numSlide == sliderOpt.slideProperties[0].length) {
                innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.marginLeft = -40 + "px";
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                numSlide = 1;
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
            } else {
                innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * (numSlide) + "px";
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                numSlide++;
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
            }
        }, false);
    })();

    (this.jumpToSlideRotate = function() {
        var innerContainer = document.getElementsByClassName("innerContainer")[0];
        var navigationPanelButton = document.getElementsByClassName("navigationPanelButton");

        for (var i = 0; i < sliderOpt.slideProperties[0].length; i++) {

            (function(e) {
                navigationPanelButton[i].addEventListener("click", function() {
                    if (sliderOpt.autoRotate == true) {
                        clearInterval(interval);
                    }
                    innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * (e) + "px";
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                    numSlide = e + 1;
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
                }, false);
            })(i);

        }
    })();

}

defaul.css:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color:#000;
}

        .container {
            margin: 20px auto;
            border-radius: 7px;
            overflow: hidden;
        }

slider.css:

.innerContainer {
    position: relative;
    background-color: #fff;
    display: block;
    margin: 0 0 0 -40px;
    list-style: none;
}

        .slide {
            display: block;
            float: left;
        }

                .slide a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                        .title {
                            width: 100%;
                            height: 50px;
                            position: absolute;
                            font-size: 34px;
                            font-weight: bold;
                            text-align: center;
                        }

                        .description {
                            width: 100%;
                            height: 50px;
                            position: absolute;
                            font-size: 34px;
                            font-weight: bold;
                            padding-left: 20px;
                        }

.leftButton {
    display: block;
    width: 40px;
    height: 40px;
    float: left;
    margin: -245px 0 0 20px;
    border-radius: 20px;
    background: url(../images/button.jpg) no-repeat 5% 90%;
    opacity: 0.5;
    cursor: pointer;
}

.rightButton {
    display: block;
    width: 40px;
    height: 40px;
    float: right;
    margin: -245px 20px 0 0;
    border-radius: 20px;
    background: url(../images/button.jpg) no-repeat 88% 90%;
    opacity: 0.5;
    cursor: pointer;
}

        .leftButton:hover, .rightButton:hover {
            opacity: 0.6;
        }

.navigationPanel {
    width: 210px;
    height: 20px;
    float: right;
    margin: -40px 15px 0 0;
    position: relative;
}

        .navigationPanelButton {
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 6px;
            float: left;
            margin-left: 12px;
            cursor: pointer;
            background: url(../images/buttonNavigation.jpg) no-repeat 97% 55%
        }

user-interface

javascript

object-oriented

html

dom

回答 1

Code Review用户

回答已采纳

发布于 2014-03-31 18:30:28

从一次又一次：

不要使用window.onload = function () {使用window.addEventListener("load",
在arrImgs中，如果所有图像与前缀具有相同的文件夹，则应添加对图像文件夹的支持。
避免匈牙利符号，arrImgs images，去掉arr，这很重要
更喜欢拼写变量inteval -> interval
对于slider.js -> use JSHint.com，存在许多风格问题
在JavaScript中设置了许多应该保存在.css文件中的内容
innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";和周围的语句出现在7(!)在您的代码中，我强烈建议使用一个常见的助手函数。

我认为您需要使用JsHint.com，检查复制粘贴的代码，并修复它，然后在一个新的问题中返回您的固定代码。*

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/44810

复制

相似问题

问交互式滑块
EN

任务：

滑翔机控件：

属性：

设置滑块：

方法滑块：

Requirements:

P.s.我是一个年轻的程序员，所以我想听听对进一步开发的真正评论。

HTML:

JavaScript:

defaul.css:

slider.css:

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交互式滑块EN

任务：

滑翔机控件：

属性：

设置滑块：

方法滑块：

Requirements:

P.s.我是一个年轻的程序员，所以我想听听对进一步开发的真正评论。

HTML:

JavaScript:

defaul.css:

slider.css:

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交互式滑块
EN