0

我正在尝试使用 datalist 从列表中获取图像 >>> 和 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>
4

3 回答 3

0

如果你想为特定角度旋转 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;">
于 2013-04-09T08:59:34.180 回答
0

在谷歌搜索此“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 秒添加一次新项目，否则我看不到这一点。

于 2013-04-09T09:36:49.427 回答
0 
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>
于 2013-04-10T06:04:12.700 回答