图像滑块计时问题

时间：2014-01-26 19:10:17

标签： javascript php css3

我是编程的新手，并尝试为我第一个网站创建一个滑块，我确实设法，但它有一些时间问题，即有时我的图像得到太快更新或太慢，无法与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>

这是我的图片列表页面：

<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>

这是图片上传页面：

<!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>

我在这里提交整个代码。请有人帮助我解决这个性能问题，并指导我走向更好的方式。

编辑：我正在使用文本文件在上传页面存储描述，使用php检索滑块页面中的变量（如果这很重要）。

0 个答案:

没有答案
相关问题
最新问题