Javascript jQuery多滑块_Javascript_Jquery_Html_Css

Javascript jQuery多滑块

javascript jquery html css

Javascript jQuery多滑块,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如何修复下面的jQuery代码，使多个滑块使用CSS类名（而不是ID）正常工作正如你在代码笔中看到的，它到处都是，没有按预期工作。滑块工作不正常 HTML JS var allSlides=$（'.slide'）； var-activeSlide=0； setInterval（'autoSlide（）'，4000）； $（“.slider next”）。单击（函数（）{ 如果（activeSlide+1>=allSlides.length）{ allSlides.eq（activeSlide

如何修复下面的jQuery代码，使多个滑块使用CSS类名（而不是ID）正常工作

正如你在代码笔中看到的，它到处都是，没有按预期工作。滑块工作不正常

HTML

var allSlides=$（'.slide'）；
var-activeSlide=0；
setInterval（'autoSlide（）'，4000）；
$（“.slider next”）。单击（函数（）{
如果（activeSlide+1>=allSlides.length）{
allSlides.eq（activeSlide）.removeClass（“active”）；
activeSlide=0；
allSlides.eq（0）.addClass（“活动”）；
}
否则{
allSlides.eq（activeSlide）.removeClass（“active”）；
activeSlide++；
allSlides.eq（activeSlide）.addClass（“active”）；
}
});
$（“.slider prev”）。单击（函数（）{
如果（活动幻灯片-1<0）{
allSlides.eq（0）.removeClass（“活动”）；
activeSlide=allSlides.length-1；
allSlides.eq（activeSlide）.addClass（“active”）；
}
否则{
allSlides.eq（activeSlide）.removeClass（“active”）；
活动幻灯片--；
allSlides.eq（activeSlide）.addClass（“active”）；
}
});
函数autoSlide（）{
如果（activeSlide+1>=allSlides.length）{
allSlides.eq（activeSlide）.removeClass（“active”）；
activeSlide=0；
allSlides.eq（0）.addClass（“活动”）；
}
否则{
allSlides.eq（activeSlide）.removeClass（“active”）；
activeSlide++；
allSlides.eq（activeSlide）.addClass（“active”）；
}
}

我不确定你在用滑块做什么，但我能够连接处理程序并让你开始工作。我为滑块设置了一个数组，然后在页面加载时将处理程序连接到滑块。单击滑块时，我认为您希望循环浏览滑块索引并将css类设置为活动。我在这里做的。请注意，按索引选择的滑块可能为空。根据您的使用定制答案

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <style type="text/css">
        .slider {
            position: relative;
            width: 80%;
        }

        .slide {
            position: relative;
            opacity: 0;
        }

        .active {
            transition: opacity 500ms ease;
            opacity: 1;
        }
    </style>

    <script type="text/javascript">
        //set the array to the slide div's we have here
        var allSlides = document.getElementsByClassName("slide");

        var activeSlide = 0;//start at 0

        setInterval('autoSlide()', 4000);
        $(function () { //when the document is ready, wire up the click functions
            $(".slider-next").click(function () {

                if (activeSlide + 1 >= allSlides.length) {
                    allSlides[activeSlide].className =""; //remove any css class on this item
                    activeSlide = 0;
                    allSlides[0].className["active"]; //careful, these items maybe null 
                }
                else {
                    allSlides[activeSlide].className="";
                    activeSlide++;
                    allSlides[activeSlide].className="active";
                }
            });
            $(".slider-prev").click(function () {
                if (activeSlide - 1 < 0) {
                    allSlides[0].className ="";
                    activeSlide = allSlides.length - 1;
                    allSlides[activeSlide].className= "active";
                }
                else {
                    allSlides[activeSlide].className= "";
                    activeSlide--;
                    allSlides[activeSlide].className ="active";
                }
            });
        });
        function autoSlide() {
            if (activeSlide + 1 >= allSlides.length) {
                allSlides[activeSlide].className = "";
                activeSlide = 0;
                allSlides[0].className ="active";
            }
            else {
                allSlides[activeSlide].className = ""; 
                activeSlide++;
                allSlides[activeSlide].className ="active";
            }
        }
    </script>
</head>
<body>
    <div>
        <div class="slider-btn">
            <button class="slider-prev"><</button>
            <button class="slider-next">></button>
        </div>
        <div class="slider">
            <div class="slide active">
                <h2>Slide 1</h2>
            </div>
            <div class="slide">
                <h2>Slide 2</h2>
            </div>
        </div>
        <div>
            <p>Some other content here</p>
        </div>
        <div class="slider-btn">
            <button class="slider-prev"><</button>
            <button class="slider-next">></button>
        </div>
        <div class="slider">
            <div class="slide active">
                <h2>Slide 1</h2>
            </div>
            <div class="slide">
                <h2>Slide 2</h2>
            </div>
        </div>
        <div>
            <p>Some other content here</p>
        </div>
    </div>
</body>
</html>


.滑块{
位置：相对位置；
宽度：80%；
}
.幻灯片{
位置：相对位置；
不透明度：0；
}
.主动{
过渡：不透明度500ms；
不透明度：1；
}
//将数组设置为我们这里的幻灯片分区
var allSlides=document.getElementsByClassName（“幻灯片”）；
var-activeSlide=0//从0开始
setInterval（'autoSlide（）'，4000）；
$（函数（）{//文档准备好后，连接click函数
$（“.slider next”）。单击（函数（）{
如果（activeSlide+1>=allSlides.length）{
allSlides[activeSlide].className=“；//删除此项目上的任何css类
activeSlide=0；
所有幻灯片[0]。类名[“活动”]；//小心，这些项目可能为空
}
否则{
所有幻灯片[activeSlide].className=“”；
activeSlide++；
所有幻灯片[activeSlide].className=“active”；
}
});
$（“.slider prev”）。单击（函数（）{
如果（活动幻灯片-1<0）{
所有幻灯片[0]。className=“”；
activeSlide=allSlides.length-1；
所有幻灯片[activeSlide].className=“active”；
}
否则{
所有幻灯片[activeSlide].className=“”；
活动幻灯片--；
所有幻灯片[activeSlide].className=“active”；
}
});
});
函数autoSlide（）{
如果（activeSlide+1>=allSlides.length）{
所有幻灯片[activeSlide].className=“”；
activeSlide=0；
所有幻灯片[0]。className=“活动”；
}
否则{
所有幻灯片[activeSlide].className=“”；
activeSlide++；
所有幻灯片[activeSlide].className=“active”；
}
}
幻灯片1
幻灯片2
这里还有其他一些内容
幻灯片1
幻灯片2
这里还有其他一些内容

谢谢，但这似乎不起作用，因为它只是在每个滑块中随机显示“幻灯片2”，而不隐藏“幻灯片1”。滑块一次只能显示一张幻灯片，带有自动播放和下一个/上一个按钮，这些按钮似乎也不起作用，并给出控制台错误“Uncaught TypeError:无法设置未定义的属性'className'。

.slider {
  position: relative;
  width: 80%;
}

.slide {
    position: absolute;
    opacity: 0;
}

.active {
    transition: opacity 500ms ease;
    opacity:1;
}

var allSlides = $('.slide');
var activeSlide = 0;

setInterval('autoSlide()', 4000);

$(".slider-next").click(function() {
  if (activeSlide+1 >= allSlides.length) {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide = 0;
    allSlides.eq(0).addClass("active");
  }
  else {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide++;
    allSlides.eq(activeSlide).addClass("active");
  }
});
$(".slider-prev").click(function() {
  if (activeSlide-1 < 0) {
    allSlides.eq(0).removeClass("active");
    activeSlide = allSlides.length-1;
    allSlides.eq(activeSlide).addClass("active");
  }
  else {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide--;
    allSlides.eq(activeSlide).addClass("active");
  }
});

function autoSlide() {
    if (activeSlide+1 >= allSlides.length) {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide = 0;
      allSlides.eq(0).addClass("active");
    }
    else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide++;
      allSlides.eq(activeSlide).addClass("active");
    }
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <style type="text/css">
        .slider {
            position: relative;
            width: 80%;
        }

        .slide {
            position: relative;
            opacity: 0;
        }

        .active {
            transition: opacity 500ms ease;
            opacity: 1;
        }
    </style>

    <script type="text/javascript">
        //set the array to the slide div's we have here
        var allSlides = document.getElementsByClassName("slide");

        var activeSlide = 0;//start at 0

        setInterval('autoSlide()', 4000);
        $(function () { //when the document is ready, wire up the click functions
            $(".slider-next").click(function () {

                if (activeSlide + 1 >= allSlides.length) {
                    allSlides[activeSlide].className =""; //remove any css class on this item
                    activeSlide = 0;
                    allSlides[0].className["active"]; //careful, these items maybe null 
                }
                else {
                    allSlides[activeSlide].className="";
                    activeSlide++;
                    allSlides[activeSlide].className="active";
                }
            });
            $(".slider-prev").click(function () {
                if (activeSlide - 1 < 0) {
                    allSlides[0].className ="";
                    activeSlide = allSlides.length - 1;
                    allSlides[activeSlide].className= "active";
                }
                else {
                    allSlides[activeSlide].className= "";
                    activeSlide--;
                    allSlides[activeSlide].className ="active";
                }
            });
        });
        function autoSlide() {
            if (activeSlide + 1 >= allSlides.length) {
                allSlides[activeSlide].className = "";
                activeSlide = 0;
                allSlides[0].className ="active";
            }
            else {
                allSlides[activeSlide].className = ""; 
                activeSlide++;
                allSlides[activeSlide].className ="active";
            }
        }
    </script>
</head>
<body>
    <div>
        <div class="slider-btn">
            <button class="slider-prev"><</button>
            <button class="slider-next">></button>
        </div>
        <div class="slider">
            <div class="slide active">
                <h2>Slide 1</h2>
            </div>
            <div class="slide">
                <h2>Slide 2</h2>
            </div>
        </div>
        <div>
            <p>Some other content here</p>
        </div>
        <div class="slider-btn">
            <button class="slider-prev"><</button>
            <button class="slider-next">></button>
        </div>
        <div class="slider">
            <div class="slide active">
                <h2>Slide 1</h2>
            </div>
            <div class="slide">
                <h2>Slide 2</h2>
            </div>
        </div>
        <div>
            <p>Some other content here</p>
        </div>
    </div>
</body>
</html>