Fatal编程技术网

Javascript 图像滑块定时问题

javascript php css

Javascript 图像滑块定时问题,javascript,php,css,Javascript,Php,Css,我是一个编程新手，并试图为ma first网站创建一个滑块，但它存在一些时间问题，即有时我的图像更新太快或太慢，无法与css3动画同步。我使用javascript计时功能和css来制作动画，使用php来上传图像和字幕（我为网站所有者创建了带有上传功能的滑块）。我附加的代码在这里，抱歉，如果它凌乱，而不是创建一个滑块的标准方式 这是我的滑块： <!DOCTYPE html> <html> <head> <title>Slider</title&

我是一个编程新手，并试图为ma first网站创建一个滑块，但它存在一些时间问题，即有时我的图像更新太快或太慢，无法与css3动画同步。我使用javascript计时功能和css来制作动画，使用php来上传图像和字幕（我为网站所有者创建了带有上传功能的滑块）。我附加的代码在这里，抱歉，如果它凌乱，而不是创建一个滑块的标准方式

这是我的滑块：

<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style> 
input[type="radio"]
{
position:relative;
top:120px;
left:600px;
display:none;
}
input[type="radio"] + label
{
position:relative;
top:120px;
left:600px;
display:inline-block;
width:19px;
height:19px;
background:url(check_radio_sheet.png) -38px no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label
{
 background:url(check_radio_sheet.png) right top no-repeat;
}
div#slider
{
width:700px;
height:306px;
margin-left:auto;
margin-right:auto;
position:relative;
top:50px;
z-index:-2;
-webkit-animation: sliding 16s infinite;
}
@-webkit-keyframes sliding
{
0%{opacity:0;left:600px;}
10%{opacity:1;left:0px;}
25%{opacity:0;left:-600px;}
35%{opacity:1;left:0px;}
50%{opacity:0;left:600px}
60%{opacity:1;left:0px;}
75%{opacity:0;left:0px;}
85%{opacity:1;left:0px;}
90%{opacity:1;left:0px;}
100%{opacity:0;left:0px;}
}
#i
{
-webkit-animation: slideimage 16s infinite;
}
@-webkit-keyframes slideimage
{
0%{width:700px;height:306px;}
10%{}
25%{}
35%{}
50%{width:700px;height:306px;}
60%{width:700px;height:306px;}
75%{width:100px;height:44px;}
85%{}
100%{width:700px;height:306px;}
}
@-webkit-keyframes com
{
0%{opacity:0;}
10%{opacity:1;}
25%{opacity:0;}
35%{opacity:1;left:0px;}
50%{opacity:0;left:300px}
51%{left:0px;}
60%{opacity:1;left:0px;}

75%{opacity:0;left:-300px}
85%{opacity:1;left:0px;}
100%{opacity:0;}
}

div#sliderframe
{
z-index:-2;
width:800px;
height:406px;
background:#666666;
overflow:hidden;
}
div.slide
{
position:relative;
left:300px;
top:100px;
}
.s
{
color:#FFFFFF;
position:relative;
top:65px;
font-size:18px;
-webkit-animation: com 16s infinite;
}
</style>
<script type="text/javascript">
<?php
for($i=1; $i<6; $i++)
{
//echo "image-slider-$i.jpg.txt";
$file=fopen("image-slider-$i.jpg.txt","r");
while(!feof($file))
{
 $a[$i]=fgets($file); 
}
fclose($file);
}
?>

var a=setInterval(function(){change()},4000);
var n=2;
function change()
{
document.getElementById("i").src="image-slider-"+n+".jpg";
document.getElementById(n).checked="checked";

if(n==1)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[1]\""?>;
}
else if(n==2)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[2]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==3)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[3]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==4)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[4]\""?>;
document.getElementById(n).checked="checked";
}
else if(n==5)
{
document.getElementById("sc").innerHTML=<?php echo "\"$a[5]\""?>;
document.getElementById(n).checked="checked";
}
n++;
if(n==6)
{
n=1;
}

}

function changenum(a)
{
n=a;
}
</script>
</head>
<body>


<div id="myslide">
    <div  class="slide" id="sliderframe">
      <div  id="slider"><img id="i" src="image-slider-1.jpg"/></div>
    <center><span id="sc" class="s"><?php echo $a[1];?></span></center>
    </div>
        <input checked="checked"  onclick="changenum('1')" id="1" type="radio" name="im"/><label for="1"></label>
        <input onClick="changenum('2')" id="2" type="radio" name="im"/><label for="2"></label>
        <input onClick="changenum('3')" id="3" type="radio" name="im"/><label for="3"></label>
        <input onClick="changenum('4')" id="4" type="radio" name="im"/><label for="4"></label>
        <input onClick="changenum('5')" id="5" type="radio" name="im"/><label for="5"></label>

</div>
</body>
</html>


滑块
输入[type=“radio”]
{
位置：相对位置；
顶部：120px；
左：600px；
显示：无；
}
输入[type=“radio”]+标签
{
位置：相对位置；
顶部：120px；
左：600px；
显示：内联块；
宽度：19px；
高度：19px；
背景：url（check_radio_sheet.png）-38px无重复；
光标：指针；
}
输入[type=“radio”]：选中+标签
{
背景：url（check_radio_sheet.png）右上方无重复；
}
div#滑块
{
宽度：700px；
高度：306px；
左边距：自动；
右边距：自动；
位置：相对位置；
顶部：50px；
z指数：-2；
-webkit动画：滑动16秒无限；
}
@-webkit关键帧滑动
{
0%{不透明度：0；左：600px；}
10%{不透明度：1；左：0px；}
25%{不透明度：0；左：-600px；}
35%{不透明度：1；左：0px；}
50%{不透明度：0；左：600px}
60%{不透明度：1；左：0px；}
75%{不透明度：0；左：0px；}
85%{不透明度：1；左：0px；}
90%{不透明度：1；左：0px；}
100%{不透明度：0；左：0px；}
}
#我
{
-webkit动画：slideimage 16s无限；
}
@-webkit关键帧幻灯片图像
{
0%{宽度：700px；高度：306px；}
10%{}
25%{}
35%{}
50%{宽度：700px；高度：306px；}
60%{宽度：700px；高度：306px；}
75%{宽度：100px；高度：44px；}
85%{}
100%{宽度：700px；高度：306px；}
}
@-webkit关键帧com
{
0%{不透明度：0；}
10%{不透明度：1；}
25%{不透明度：0；}
35%{不透明度：1；左：0px；}
50%{不透明度：0；左：300px}
51%{左：0px；}
60%{不透明度：1；左：0px；}
75%{不透明度：0；左：-300px}
85%{不透明度：1；左：0px；}
100%{不透明度：0；}
}
div#滑块框架
{
z指数：-2；
宽度：800px；
高度：406px；
背景#666666；
溢出：隐藏；
}
滑梯
{
位置：相对位置；
左：300px；
顶部：100px；
}
s
{
颜色：#FFFFFF；
位置：相对位置；
顶部：65px；
字号：18px；
-webkit动画：com 16s无限；
}
var a=setInterval（函数（）{change（）}，4000）；
var n=2；
函数更改（）
{
document.getElementById（“i”）.src=“图像滑块-”+n+”.jpg”；
document.getElementById（n）.checked=“checked”；
如果（n==1）
{
document.getElementById（“sc”）.innerHTML=；
}
else如果（n==2）
{
document.getElementById（“sc”）.innerHTML=；
document.getElementById（n）.checked=“checked”；
}
else如果（n==3）
{
document.getElementById（“sc”）.innerHTML=；
document.getElementById（n）.checked=“checked”；
}
else如果（n==4）
{
document.getElementById（“sc”）.innerHTML=；
document.getElementById（n）.checked=“checked”；
}
else如果（n==5）
{
document.getElementById（“sc”）.innerHTML=；
document.getElementById（n）.checked=“checked”；
}
n++；
如果（n==6）
{
n=1；
}
}
函数changenum（a）
{
n=a；
}
这是我的图像列表页面：

<html>
<head>
<style type="text/css">
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
  .align_center
  {
   position:relative;
   left:350px;
   top:120px; 
   float:left;
  }
</style>
</head>
<body>
<?php
for($i=1; $i<6; $i++)
{
//echo "image-slider-$i.jpg.txt";
$file=fopen("image-slider-$i.jpg.txt","r");
while(!feof($file))
{
 $a[$i]=fgets($file); 
}
fclose($file);
}?>
<div class="align_center">
    <div class="img">
      <a href="imageupload.php?image=image-slider-1.jpg">
      <img src="image-slider-1.jpg" alt="slider image" width="110" height="90" />
      </a>
      <div class="desc"><?php echo $a[1]; ?></div>
    </div>
    <div class="img">
      <a href="imageupload.php?image=image-slider-2.jpg">
      <img src="image-slider-2.jpg" alt="slider image" width="110" height="90" />
      </a>
      <div class="desc"><?php echo $a[2]; ?></div>
    </div>
    <div class="img">
      <a href="imageupload.php?image=image-slider-3.jpg">
      <img src="image-slider-3.jpg" alt="slider image" width="110" height="90" />
      </a>
      <div class="desc"><?php echo $a[3]; ?></div>
    </div>
    <div class="img">
      <a href="imageupload.php?image=image-slider-4.jpg">
      <img src="image-slider-4.jpg" alt="slider image" width="110" height="90" />
      </a>
      <div class="desc"><?php echo $a[4]; ?></div>
    </div>
    <div class="img">
      <a href="imageupload.php?image=image-slider-5.jpg">
      <img src="image-slider-5.jpg" alt="slider image" width="110" height="90" />
      </a>
      <div class="desc"><?php echo $a[5]; ?></div>
    </div>
</div>
</body>
</html>


部门经理
{
保证金：2倍；
边框：1px实心#0000ff；
高度：自动；
宽度：自动；
浮动：左；
文本对齐：居中；
}
部门经理经理经理
{
显示：内联；
保证金：3倍；
边框：1px实心#ffffff；
}
第a部分：悬停式img
{
边框：1px实心#0000ff；
}
分区描述
{
文本对齐：居中；
字体大小：正常；
宽度：120px；
保证金：2倍；
}
.对准中心
{
位置：相对位置；
左：350px；
顶部：120px；
浮动：左；
}
这是图像上传页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.notice{
display:inline;
margin:2px;
border:solid 2px;
position:absolute;
top:60px;
width:200px;
float:left;
padding:4px;
}
.upload_details
{
position:relative;
left:500px;
}
.upload_details input[type="submit"]
{
width:300px;
}
</style>
</head>

<body>
<?php

$image=$_GET['image'];
?>
<center>
        <a href="viewslideimage.php">Go to update page</a><br /><br />
        <img src=<?php echo "\"$image\"";?> /><br />
</center>
<br />
<div class="upload_details">
    <form method="post" enctype="multipart/form-data" action="imageupload.php?image=<?php echo "$image\"";?>>
            Add description : <input type="text" name="description" id="des" /><br /><br />
            <label for="slide_image">Upload new image : </label>
            <input type="file" id="slide_imageid" name="slide_image" accept="image/jpeg"/>
            <br /><br />

            <input type="submit" value="Upload"/>
    </form>
</div>
<?php
if(isset($_REQUEST['description']))
{
$a=$_REQUEST['description'];
if($a=="")
{
echo '<p style="color:red">Enter description, if you want a new one.</p>';
}
else
{
$file=fopen($image.".txt","w");
fwrite($file,$a);
echo '<p style="color:green">Description uploaded</p>';
}

if ((($_FILES["slide_image"]["type"] == "image/jpeg")|| ($_FILES["slide_image"]["type"] == "image/jpg"))&& ($_FILES["slide_image"]["size"] < 200000))
{
if ($_FILES["slide_image"]["error"] > 0)
  {
  echo "Error: " . $_FILES["slide_image"]["error"] . "<br>";
  }
else
  {
  echo "Uploaded image: " . $_FILES["slide_image"]["name"] ."of Size: " . ($_FILES["slide_image"]["size"]/1024 ) . " kB<br>";

  $_FILES["slide_image"]["name"]=$image;

  move_uploaded_file($_FILES["slide_image"]["tmp_name"],$_FILES["slide_image"]["name"] );
  }
}
else
{
echo "invalid file";
}
}
?>

</body>
</html>


无标题文件
.通知{
显示：内联；
保证金：2倍；
边框：实心2px；
位置：绝对位置；
顶部：60px；
宽度：200px；
浮动：左；
填充：4px；
}
.上传您的详细信息
{
位置：相对位置；
左：500px；
}
.upload_详细信息输入[type=“submit”]
{
宽度：300px；
}



/>




这可能是一种竞争条件，因为某些图像的文件大小比其他图像大吗？@Phlume但我只使用小于200 kb的图像，无论如何，我将使用相同大小的图像进行测试。非常感谢您的回复。@phlume不，这并不能解决我的问题