Question

我正在尝试使用圆滑的传送带来滑动日历的年份，但无法使其正常工作。

这就是我要制作幻灯片的地方：

这是我的代码：

document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+year+"</div><div class='slick'>"+meses[month-1]+"</div><div class='slick'><a style='color: #cccccc;' onclick='mostrarCalendario("+prevYear+","+prevMonth+")'>&lt;</a></div><div class='slick'><a style='color: #cccccc;' onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</a></div><div class='slick'>"+meses[month-3]+"</div><div class='slick'>"+meses[month+1]+"</div><div class='slick'>"+meses[month-2]+"</div><div class='slick'>"+meses[month]+"</div>";

当我在代码中使用此部分时，这将不起作用...

$('.slick').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 5,
  responsive: [
{
  breakpoint: 768,
  settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 3
  }
},
{
  breakpoint: 480,
  settings: {
    arrows: false,
    centerMode: true,
    centerPadding: '40px',
    slidesToShow: 1
  }
}
  ]
});

我希望当我单击<或>时，月份才能滑动，但我不能。

非常感谢你。

这里有PHP代码，库在哪里：

<!DOCTYPE html>
<html lang="es">
<head>
	
	
    <script src="js/semanal.js"></script>
	<script src="slick/slick.min.js"></script>
	<link rel="stylesheet" href="slick/slick.css">
	<meta charset="utf-8">
</head>
<body>
 <center>
<table id="calendar">
<p>
	<caption></caption>
	<thead>
	
		<tr>
			<th>LUNES</th><th>MARTES</th><th>MIERCOLES</th><th>JUEVES</th><th>VIERNES</th><th>SABADO</th><th>DOMINGO</th>
		</tr>
	</thead>
	<tbody>
	<script>mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);</script>
	
	</tbody>
</table>
 </center>
</body>
<script src="js/semanal.js"></script>
</html>

Answer 1

当您使用javascript附加html时，可能是当平滑加载时，内容尚不可用，请尝试将$('.slick').slick()放在setTimeOut()函数中。另外，您有两次此行<script src="js/semanal.js"></script>，第二次应在结束body标签之前，因此，请解决此问题，并考虑将其余脚本移到那里（在close body标签之前）。

编辑

您需要将所有幻灯片放在单个.slick元素中，因此您需要执行以下操作。看看我对您的标记所做的更改

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="slick/slick.css">
</head>
<body>
    <center>
        <table id="calendar">
            <caption>
                <div class="slick"></div> 
            </caption>
            <thead>
                <tr>
                    <th>LUNES</th><th>MARTES</th><th>MIERCOLES</th><th>JUEVES</th><th>VIERNES</th><th>SABADO</th><th>DOMINGO</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </center>
    <script src="slick/slick.min.js"></script>
    <script src="js/semanal.js"></script>
    <script>mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);</script>
</body>
</html>

为了便于阅读，我将其移到了不同的行，看起来我删除了光滑的类并使其找到光滑的类而不是标题标签

document.getElementById("calendar").getElementsByClass("slick")[0].innerHTML="<div>"+year+"</div>"+
"<div>"+meses[month-1]+"</div>"+
"<div><a style='color: #cccccc;' onclick='mostrarCalendario("+prevYear+","+prevMonth+")'>&lt;</a></div>"+
"<div><a style='color: #cccccc;' onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</a></div>"+
"<div>"+meses[month-3]+"</div><div class='slick'>"+meses[month+1]+"</div><div class='slick'>"+meses[month-2]+"</div>"+
"<div>"+meses[month]+"</div>"

圆滑的传送带不起作用

1 个答案: