Javascript 如何使用项目符号使用jquery制作滑块_Javascript_Jquery_Html_Css

Javascript 如何使用项目符号使用jquery制作滑块

javascript jquery html css

Javascript 如何使用项目符号使用jquery制作滑块,javascript,jquery,html,css,Javascript,Jquery,Html,Css,您好，我想知道如何使用jquery制作滑块，我对这方面比较陌生，我会尽我所能做到具体，我想这样做：我有一个滑块，上面有3个图像“它们在同一个空间”和图像下面的3个项目符号，首先我看不到图像，因为它们有不透明度：0但是如果我单击第一个项目符号，我将看到第一个图像，项目符号2 img 2，项目符号3 img 3，我想在“前进到下一个图像”中添加一个，它将位于右侧左边是你看到的最后一张图片，我的问题是我怎么做？我将需要保持他们的过渡，以及如何将其加入子弹？因为我需要使用标签，这是我想要的，我已经完成

您好，我想知道如何使用jquery制作滑块，我对这方面比较陌生，我会尽我所能做到具体，我想这样做：

我有一个滑块，上面有3个图像“它们在同一个空间”和图像下面的3个项目符号，首先我看不到图像，因为它们有不透明度：0但是如果我单击第一个项目符号，我将看到第一个图像，项目符号2 img 2，项目符号3 img 3，我想在“前进到下一个图像”中添加一个

，它将位于右侧左边是你看到的最后一张图片，我的问题是我怎么做？我将需要保持他们的过渡，以及如何将其加入子弹？因为我需要使用标签

，这是我想要的，我已经完成了，如果它能帮助别人，我很高兴

html:

使用jQueryUI怎么样？

<!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>

$.fn.slider = function(config){
    var nodos = this;
    var delay = (typeof config.delay == "number")?parseInt(config.delay):4000;
    for (var i = 0; i < nodos.length; i++) {
        Slider(nodos[i]);
    }
    function Slider(nodo){
        var galeria = $(nodo).find('ul');
        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++) {
            html_bullets+="<li data-index='"+it+"'>&nbsp;</li>";
        }

        html_bullets+="</ul>";
        $(nodo).append(html_bullets);

        var bullets = $(nodo).find("ul.controles li");
        bullets.click(function(){
        var index= $(this).data("index");
        bullets.removeClass('activa');
        $(imagenes[index]).addClass("activa");  
        $(bullets[index]).addClass("activa");   
        });
    }
};

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

});

.slider{
    width: 320px;
    overflow: hidden;
}

.slider ul{
    list-style: none;
    padding: 0; 
}

.slider ul.galeria{
    height: 200px;
    position: relative;
}

.slider ul.galeria li{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 2s;
}

.slider ul.galeria li.activa{
    opacity: 1;
}

.slider ul.galeria img{
    max-height: 200px;
}

/*Controles*/
.slider ul.controles {
    text-align: center;
}

.slider ul.controles li{
    background-color: black ;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}

<!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>

$.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});
});

.slider{
    width: 420px;
    overflow: hidden;
}

.slider ul{
    list-style: none;
    padding: 0; 
}

.slider ul.galeria{
    height: 200px;
    position: relative;
    margin-left: 30px;
}

.slider ul.galeria li{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 2s;
}

.slider ul.galeria li.activa{
    opacity: 1;
}

.slider ul.galeria img{
    max-height: 400px;
    max-width: 300px;
    margin-left: 5px;   
}

/*Controles*/
.slider ul.controles {
    position: relative;
    left: 38%;
    bottom: 45px;
}

.slider ul.controles li{
    background-color: black ;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
.slider ul.controles li.activa{
    background-color: red ;
}

.slider a.atras{
    position: relative;
    left: 0;
    top: 128px;

}
.slider a.siguiente{
    position: relative;
    left: 80%;
    bottom: 120px;
}