0
私は自分のウェブサイトにスライドショーを配置する際に問題がありました。同じページに複数のスライドショーが必要なので、スクロールなどの問題が複数発生しています。私は最終的にほぼ完全に機能するソリューションを見つけましたが、インジケータは現在のスライドを反映するように色が変わりません。現在のコードでスライドショーインジケータのスタイルを変更するにはどうすればよいですか？
var w3 = {};
w3.slideshow = function (sel, ms, func) {
var i, ss, x = w3.getElements(sel), l = x.length;
ss = {};
ss.current = 1;
ss.x = x;
ss.ondisplaychange = func;
if (!isNaN(ms) || ms == 0) {
ss.milliseconds = ms;
} else {
ss.milliseconds = 1000;
}
ss.start = function() {
ss.display(ss.current)
if (ss.ondisplaychange) {ss.ondisplaychange();}
if (ss.milliseconds > 0) {
window.clearTimeout(ss.timeout);
ss.timeout = window.setTimeout(ss.next, ss.milliseconds);
}
};
ss.next = function() {
ss.current += 1;
if (ss.current > ss.x.length) {ss.current = 1;}
ss.start();
};
ss.previous = function() {
ss.current -= 1;
if (ss.current < 1) {ss.current = ss.x.length;}
ss.start();
};
ss.display = function (n) {
w3.styleElements(ss.x, "display", "none");
w3.styleElement(ss.x[n - 1], "display", "block");
}
ss.start();
return ss;
};<html>
<script src="w3.js"></script>
<body>
<div id="2" class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
\t <div class="w3-content">
\t \t \t <div class="w3-content w3-display-container w3-center">
\t \t \t
\t \t <div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
\t \t </div>
\t \t <!-- Second slide App Development -->
\t \t <div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
\t \t </div>
\t \t <!-- Third slide App Development -->
\t \t <div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
\t \t </div>
\t \t <!-- Fourth slide App Development -->
\t \t <div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
\t \t </div>
\t \t <div class="w3-center w3-container w3-section w3-large w3-text-grey" style="width:100%">
\t \t \t <span class="w3-left w3-hover-text-blue fa fa-arrow-left" onclick="myShow2 .previous()"></span>
\t \t \t <span class="w3-right w3-hover-text-blue fa fa-arrow-right" onclick="myShow2 .next()"></span>
\t \t \t <span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(1)"></span>
\t \t \t <span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(2)"></span>
\t \t \t <span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(3)"></span>
\t \t \t <span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(4)"></span>
\t \t </div>
\t \t
\t \t </div>
</div>
<script> myShow2 = w3.slideshow(".Slide2", 0); </script>
</div>
</body>
</html>ので、コードがうまく機能し、私はサークル指標は現在のスライドを反映するために、青に変化させる方法がわからないんだけど除いて、私が欲しいものを行います。私は、同じページに複数のスライドショーを可能にする唯一の方法以外は全く異なるアプローチを試みました。私は、クリックしたときにサークルを青色にし、別のものをクリックしたときに元に戻す方法について説明してください。
あなたのスニペットでは残念ながら、 'w3'は未定義です。 [**最小限で、完全で、検証可能な例**]（http://stackoverflow.com/help/mcve）を提供してください。 P –
w3はcssで定義されていますが、私はそれをSOでどのように参照するかはわかりませんが、問題を解決するにはちょっと難しいです。問題は、私が感じる論理によります。 –
w3はCSS yesで定義されていますが、JavaScriptでは定義されていません。 'var w3？ 'をどこで初期化していますか？フレームワークやプラグインを使っていますか？これに加えてコードはありますか？ –