Question

我正在尝试使用datalist从列表中获取图像＆gt;＆gt;＆gt;和jQuery旋转这个图像，但jQuery不旋转图像....任何人都可以告诉我我的代码有什么不对

<script type="text/javascript">
var activeNewItem = 0;
        $(function () {
            var totalItems = $("#MyRotator LI").length;
            $("#MyRotator LI").hide();
            $("#MyRotator LI::nth-child(" + ((activeNewItem++ % totalItems) + 1) + ")").show();
            setTimeout('RotateWhatsNew()', 5000); //30000
        });       
</script>
<asp:DataList id="rotator"  bordercolor="Black" cellpadding="2" 
    headerstyle-backcolor="DarkBlue" 
    headerstyle-forecolor="Yellow" repeatcolumns="1"    
    runat="server" Height="179px" Width="168px">  
<HeaderStyle BackColor="DarkBlue" ForeColor="Yellow"></HeaderStyle>
<ItemTemplate>
<div id="MyRotator">
        <ul type="none">
<li style='padding: 3px; list-style: none; width: 200px; word-wrap: break-word; display: none'>

                    <img  Id="Image"   height='90%' width='90%' src='<%=siteurl%>/<%# DataBinder.Eval(Container.DataItem,"ThumbnailOnForm")%>'/> 
             </li>
</ul>
    </div>
</ItemTemplate>
</asp:DataList>

Answer 1

如果要将div旋转特定角度，请尝试使用此css

-moz-transform: rotate(344deg);
-o-transform: rotate(344deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9396926207859084, M12=0.3420201433256687, M21=-0.3420201433256687,
M22=0.9396926207859084); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
M11=0.9396926207859084, M12=0.3420201433256687, M21=-0.3420201433256687, 
M22=0.9396926207859084)"; /* IE8 */
writing-mode: lr-tb;">

Answer 2

通过Google搜索此“RotateWhatsNew”功能后，结果让我觉得您不想实际旋转图像，只需隐藏列表项并仅显示新项目。

我认为代码应该更像这样：

<script type="text/javascript">
    var activeNewItem = 0,
        waitTime = 5000;

    function RotateWhatsNew() {
        var totalItems = $("#MyRotator li").length;
        $("#MyRotator li").hide();
        $("#MyRotator li:nth-child(" + ((activeNewItem++ % totalItems) + 1) + ")").show();
        setTimeout(RotateWhatsNew, waitTime);
    };  

    $(function() {
      setTimeout(RotateWhatsNew, waitTime);
    });     
</script>

这有帮助吗？我可能误解了你。除非列表每5秒钟附加一个新项目，否则我不会看到这个问题。

Answer 3

jQuery code to fade images in throughout a sequence
$(document).ready(function () {
    $('#BannerSlideshow').innerfade({
        speed: 2500,
        timeout: 7000,
        type: 'sequence',
        containerheight: '300px'
    });

Example of the list of images
<ul id="BannerSlideshow" style="list-style-type: none;">
    <li><img src="SiteImages/HeaderBackgrounds/HeaderBackground1.png" alt="" /></li>
    <li><img src="SiteImages/HeaderBackgrounds/HeaderBackground2.png" alt="" /></li>
    <li><img src="SiteImages/HeaderBackgrounds/HeaderBackground3.png" alt="" /></li>
    <li><img src="SiteImages/HeaderBackgrounds/HeaderBackground4.png" alt="" /></li>
    <li><img src="SiteImages/HeaderBackgrounds/HeaderBackground5.png" alt="" /></li>
    <li><img src="SiteImages/HeaderBackgrounds/HeaderBackground6.png" alt="" /></li>
</ul>

jQuery不会旋转图像

3 个答案: