使用jquery循环为自动旋转旋转图像进行照片幻灯片放映

时间:2014-05-09 03:50:14

标签: php jquery

我使用了一些我发现的幻灯片代码。我得到了一个跑步,并显示图片很棒。我正在播放幻灯片的电视转为90度。但它只是身体上的转变。它没有在操作系统中使用。所以我需要将所有图像旋转90度

我似乎无法正确地将代码翻转。我尝试过PHP,但我的知识有限使我无法正确使用PHP。

这是我使用

的代码
<!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>Slideshow</title><!-- -->

<script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.lite.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#myslides').cycle({
        fit: 1, pause: 1, timeout: 4000
    });
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<?php
$directory = 'images/slideshow';    
try {       
    // Styling for images   
    echo '<div id="myslides">'; 
    foreach ( new DirectoryIterator($directory) as $item ) {            
        if ($item->isFile()) {
            $path = $directory . '/' . $item;

            echo '<img src="' . $path . '"/>';  
        }
    }   
    echo '</div>';
}   
catch(Exception $e) {
    echo 'No images found for this slideshow.<br />';   
}
?>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

有多种“旋转”,但我认为你想要的只是“在90度时取消图像”。

在这种情况下,我建议使用PHP而不是PHP。确保旋转不会截断任何图像。

#90Image
{
    /* Firefox */
    -moz-transform:rotate(90deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(90deg);
    /* Opera */
    -o-transform:rotate(90deg);
    /* IE9 */
    -ms-transform:rotate(90deg);
}

并将代码修改为:

echo '<img id="90Image" src="' . $path . '"/>';