想用jquery實作影片，但是不知道為什么調不出來，請問是什么情況？上面顯示我的fadeOut is not a function
<head>
<title>Home</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/jquery-3.4.1.js"></script>
<script src="https://bbs.csdn.net/topics/js/index.js"></script>
<script>
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- //Meta tag Keywords -->
<!-- Custom-Files -->
<link rel="stylesheet" href="https://bbs.csdn.net/topics/css/bootstrap.css">
<!-- Bootstrap-Core-CSS -->
<link rel="stylesheet" href="https://bbs.csdn.net/topics/css/style.css" type="text/css" media="all" />
<!-- Style-CSS -->
<!-- font-awesome-icons -->
<link href="https://bbs.csdn.net/topics/css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome-icons -->
<!-- /Fonts -->
<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900"
rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900"
rel="stylesheet">
<!-- //Fonts -->
</head>
var banner_current = 0;
var banner_infos;
var button_banner_next,button_banner_perv;
var animate_end_flag = false;
window.onload = start;
function start()
{
let button_banner_perv = document.getElementById("banner_perv");
let button_banner_next = document.getElementById("banner-next");
let banner_infos = document.getElementsByClassName("banner-info");
alert("pause");
button_banner_perv.onclick = function(){ goPerv(banner_infos) };
button_banner_next.onclick = function(){ goNext(banner_infos) };
}
function goPerv(banner_infos)
{
let origin_position = parseInt(window.getComputedStyle(banner_infos[banner_current],null).left);
var animeclock = setInterval(function(){ moveLeft(banner_infos[banner_current]) },5);
$(".banner-list")[banner_current].fadeOut(500);
/*等待影片執行完畢*/
var waitTime = setInterval(
function()
{
if(animate_end_flag == true)
{
animate_end_flag = false;
clearInterval(waitTime);
banner_infos[banner_current].style.display = "none";
if(banner_current == 0)
{
banner_current = banner_infos.length - 1;
}
else
{
banner_current = banner_current - 1;
}
banner_infos[banner_current].style.visibility = "hidden";
banner_infos[banner_current].style.display = "block";
banner_infos[banner_current].style.left= document.body.clientWidth + (parseInt(window.getComputedStyle(banner_infos[banner_current],null).width)) + "px";
banner_infos[banner_current].style.visibility = "visible";
animeclock = setInterval(function(){ backCenter(banner_infos[banner_current]) },5);
$(".banner-list")[banner_current].fadeIn(500);
}
}
,50);
function moveLeft(element)
{
let position = element.getBoundingClientRect().right;
let movestep = parseInt(window.getComputedStyle(element,null).left);
if(position <= 0 )
{
clearInterval(animeclock);
animate_end_flag = true;
element.style.display = "none";
}
else
{
movestep -= 30;
element.style.left = movestep + "px";
}
}
function backCenter(element)
{
let position = element.getBoundingClientRect().left;
let movestep = parseInt(window.getComputedStyle(element,null).left);
if(position <= origin_position)
{
clearInterval(animeclock);
}
else
{
movestep -= 30;
element.style.left = movestep + "px";
}
}
function vanish()
{
}
function appear()
{
}
}
function goNext(banner_infos)
{
let origin_position = parseInt(window.getComputedStyle(banner_infos[banner_current],null).left);
var animeclock = setInterval(function(){ moveRight(banner_infos[banner_current]) },5);
$(".banner-list")[banner_current].fadeOut(500);
var waitTime = setInterval(
function()
{
if(animate_end_flag == true)
{
animate_end_flag = false;
clearInterval(waitTime);
banner_infos[banner_current].style.display = "none";
if(banner_current == banner_infos.length - 1)
{
banner_current = 0;
}
else
{
banner_current = banner_current + 1;
}
banner_infos[banner_current].style.visibility = "hidden";
banner_infos[banner_current].style.display = "block";
banner_infos[banner_current].style.left= (-parseInt(window.getComputedStyle(banner_infos[banner_current],null).width)) + "px";
banner_infos[banner_current].style.visibility = "visible";
$(".banner-list")[banner_current].fadeIn(500);
animeclock = setInterval(function(){ backCenter(banner_infos[banner_current]) },5);
}
}
,50);
function moveRight(element)
{
let position = element.getBoundingClientRect().left;
let movestep = parseInt(window.getComputedStyle(element,null).left);
if(position >= parseInt(document.body.clientWidth) )
{
clearInterval(animeclock);
animate_end_flag = true;
element.style.display = "none";
}
else
{
movestep += 30;
element.style.left = movestep + "px";
}
}
function backCenter(element)
{
let position = element.getBoundingClientRect().left;
let movestep = parseInt(window.getComputedStyle(element,null).left);
if(position >= origin_position)
{
clearInterval(animeclock);
}
else
{
movestep += 30;
element.style.left = movestep + "px";
}
}
uj5u.com熱心網友回復：
$(".banner-list").eq(banner_current).fadeOut(500)
uj5u.com熱心網友回復：
$(".banner-list")[banner_current].fadeOut(500);你是是不是要獲取類名為banner-list的第n個元素啊？如果是的話應該這樣寫
$(".banner-list").eq(n).fadeOut(500);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/155342.html
標籤：JavaScript
上一篇：Html基礎筆記第二節。