分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 如何从头开始制作jquery滑块，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我在工作申请中被要求从头开始制作jQuery滑块插件.

我刚毕业时是一名计算机科学工程师,说实话,我从未在大学里接受关于jQuery的教育.完全没有.

我知道的很少,是因为我阅读了文档并进行了一些实验.

但是jQuery滑块与我目前的能力相差甚远.

我正在阅读github http://rafbm.github.io/howtomakeaslider/上的这篇文章,这是非常具有说明性的,但是仍然只是复制代码(这是我完全不了解的方式)是没有价值的,因为我需要/想要的是理解如何做一个.

关于我已经完成的小型自由职业,这很容易,因为我只是寻找插件,但现在我意识到我需要开始学习如何自己制作这些,并且最好先做一个滑块.

我需要什么？就像我在阅读时一样,我应该创建一个滑块类并为next(),prev()和goTo()滑动方法创建方法.问题在于,对于我所听到的,javascript / jQuery不是一种纯粹的OOP语言,而且它的完成方式不同.

将图像存储在数组中需要的基本内容是什么,知道当前位置并滑动到下一个/上一个？

非常感谢帮助.我的HTML和CSS标记如下：

<!DOCTYPE html>
        <html>
        <head>
            <@L_801_15@ charset="utf-8">
            <title>Slider Plugin</title>
            <style type="text/css">
                a{
                    text-decoration: none;
                    color: black;
                    text-align: center;
                }
                .slider{
                    width: 300px;
                    height: 200px;
                    overflow: hidden;
                    float: left;
                }
                .slider > ul{
                    position: relative;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    -webkit-transition: 0.5s left;
                    -moz-transition: 0.5s left;
                    -ms-transition: 0.5s left;
                    -o-transition: 0.5s left;
                }
                .slider > ul li img{
                    width: 300px;
                    height: 200px;
                    overflow: hidden;
                }
                .img-thumb-container > ul{
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }
                .thumb{
                    width: 50px;
                    height: 50px;
                    display: inline-block;
                    text-align: center;
                }
                .img-thumb-container{
                    float: left;
                    height: 150px;
                    width: 200px;
                }
            </style>
            <script src="js/jquery.js"></script>
            <script src="js/slider.js"></script>
        </head>
        <body>
            <div class="img-thumb-container">
                <ul>
                    <a href="#"><li><button type="button">&#8593;</button></li></a>
                    <a href="#"><li>
                        <img src="images/s1.jpg" class="thumb">
                    </li></a>
                    <a href="#"><li>
                        <img src="images/s2.jpg" class="thumb">
                    </li></a>
                    <a href="#"><li>
                        <img src="images/s3.jpg" class="thumb">
                    </li></a>
                    <a href="#"><li><button type="button">&#8595;</button></li></a>
                </ul>
            </div>
            <div class="slider">
                <ul>
                    <li><img src="images/s1.jpg"></li>
                    <li><img src="images/s2.jpg"></li>
                    <li><img src="images/s3.jpg"></li>
                </ul>
            </div>
        </body>
        </html>