Question

您好我想知道如何使用jquery创建一个滑块，我对此很新，我会尽力做到具体，我想这样做：
我有一个3个图像的滑块“它们在同一个空间”，图像下面有3个子弹，首先我看不到图像，因为它们有不透明度：0但是如果我点击第一个项目符号，我会看到第一个图像， bullet＃2 img＃2，bullet＃3 img＃3，我想放一个it->getTitle()标签，例如(*it).getTitle()用于前进到下一张图片“它将在右侧”和左边方将回到你看到的最后一张图片，我的问题是我怎么能这样做？我需要保持他们的过渡以及如何将其加入子弹？因为我需要使用标签<a>＆lt; - 按钮“对我来说”或子弹，这很难，而且我正在尝试这样做，欢迎任何帮助

这是我的HTML：

<a href="#"class="avanzar1">avanzar</a>

这是js：

<a>

这是css：

<!DOCTYPE html>
<html>
<head>
    <title>Slider</title>
    <meta charset="utf-8" />    
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/slider.js"></script>
</head>
<body>
<div class="sliders">
   <a href="#" class="retroceder">back</a>
<a href="#" class="avanzar">next</a>
    <ul >
        <li><img src="image_1.jpg"></li>
        <li><img src="image_2.jpg"></li>
        <li><img src="image_3.jpg"></li>
    </ul>
<!--    <ul class="controles">
        <li class="activa">&nbsp</li>
        <li>&nbsp</li>
        <li>&nbsp</li> 
    </ul> -->
</div>
<div class="sliders">
<a href="#" class="retroceder1">back</a>
<a href="#" class="avanzar1">next</a>
    <ul>
        <li><img src="image_1.jpg"></li>
        <li><img src="image_2.jpg"></li>
        <li><img src="image_3.jpg"></li>
    </ul>   

</div>

</body>
</html>

Answer 1

这就是我想要的，我已经完成了它，我很高兴，如果它可以帮助某人

HTML：

 PLS-00221: 'AN_LAST_CUR' is not a procedure or is undefined

JS：

<!DOCTYPE html>
<html>
<head>
    <title>Practica2Jquery</title>
    <meta charset="utf-8" />    
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"></script>
    <script src="slider.js"></script>
</head>
<body>
<div class="sliders">
<a href="#" class="atras">Atras</a>
    <ul >
        <li class="activa"><img src="image1.jpg"></li>
        <li><img src="image2.jpg"></li>
        <li><img src="image3.jpg"></li>
    </ul>
    <a href="#" class="siguiente">Siguiente</a>
</div>
<div class="sliders">
<a href="#" class="atras">Atras</a>
    <ul>
        <li class="activa"><img src="image4.jpg"></li>
        <li><img src="image5.jpg"></li>
        <li><img src="image6.jpg"></li>
    </ul>   
<a href="#" class="siguiente">Siguiente</a>
</div>

</body>
</html>

的CSS：

$.fn.slider = function(config){
    var nodos = this;
    var delay = (typeof config.delay === "number")?parseInt(config.delay):3000;
    for (var i = 0; i < nodos.length; i++) {
        Slider(nodos[i]);
    }

    function Slider(nodo){
        var galeria = $(nodo).find('ul');
        var tag = "<a class='atras'></a>";
        if(!$(nodo).hasClass('slider'))
        $(nodo).addClass('slider');

        if(!galeria.hasClass('galeria'))
        galeria.addClass("galeria");

        //Encontrar cuantas imagenes hay en la galeria
        var imagenes = $(galeria).find('li');

        //Controles
        var html_bullets="<ul class='controles'>";
        for (var it = 0; it < imagenes.length; it++) {
            if(it==0)
            html_bullets+="<li data-index='"+it+"' class='activa'>&nbsp;</li>";
            else    
            html_bullets+="<li data-index='"+it+"'>&nbsp;</li>";
        }

        html_bullets+="</ul><a class='siguiente'></a>";
        $(nodo).append(html_bullets);
        $(nodo).prepend(tag);
        var bullets = $(nodo).find("ul.controles li");
        bullets.click(function(){
        var index= $(this).data("index");
        $(imagenes).add(bullets).removeClass('activa');
        $(imagenes[index]).add(bullets[index]).addClass('activa');

        });
    }
        $(".slider").on("click","a.atras",function(){
            direcciones({div: this.parentElement});
        });
        $(".slider").on("click","a.siguiente",function(){
            direcciones({div: this.parentElement,direccion:1});
        }); 

        function direcciones(lado){
            var div = lado.div;
            var imagen = $(div).find("ul.galeria li.activa");
            var imagenes = $(div).find("ul.galeria li");
            var bullet = $(div).find("ul.controles li.activa");
            var bullets = $(div).find("ul.controles li");
            var index = bullet.data("index");
            var max = bullets.length-1;
            $(bullets).add(imagenes).removeClass('activa');
        if(lado.direccion){
            // === ?
            if(index == max){
            $(imagenes[0]).add(bullets[0]).addClass('activa');
            }else {
            $(imagenes[index+1]).add(bullets[index+1]).addClass('activa');
            }   
        }
        else{
            if(index == 0){
            $(imagenes[max]).add(bullets[max]).addClass('activa');
            }else {
            $(imagenes[index-1]).add(bullets[index-1]).addClass('activa');
            } } } };

$(document).ready(function() {
$(".sliders").slider({delay:3000});
});

如何使用子弹制作带有jquery的滑块

1 个答案: