我正在尝试使用javascript在图片列表中添加一些动画:
<script>
$(function () {
$('#rotate1').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 4000,
type: 'sequence',
containerheight: 'auto'
});
});
</script>
这是我的html代码,我正在使用<ul>
标记图片列表来制作动画:
<div style="text-align:right; vertical-align: top; float: right; margin-top: 40px; margin-left: 20px; margin-right: 20px">
<ul id="rotate1" style="list-style: none; width: 100%">
<li><img src="~/Images/logo11w.png" alt="1" style="border:8px solid #d6d6d6;">first image text</li>
<li><img src="~/Images/movies1.png" alt="1" style="border:8px solid #d6d6d6;">first image text</li>
</ul>
</div>
当我设置ul
id="rotate1"
时,图片列表超出了我的页面边框,因为浮动是正确的。当我不id="rotate1"
时,即使设置了右浮动,它也会停留在我的页面边框中。
如果ul
标签中只有一个图像,则图像会停留在蛀虫中。
如果从样式中删除右侧浮动,则图像将保留在边框中。
下面的图片就是我想要的样子
example image http://i59.tinypic.com/29gilcj.png
这是它使用id="rotate1"
的方式
example image http://i61.tinypic.com/2ng5qag.png
编辑:创建一个小提琴: http://jsfiddle.net/naveedshr/7t7csaz0/
答案 0 :(得分:0)
观察文字问题。它不会根据您的图像进行调整。图像设置为float,文本位于后面。图像将出现在文本前面。因此,对文本使用div并尝试将文本设置为float - left,right to right。
对于图像,我建议使用position: absolute
代替浮点数,然后指定左右。
<div style="text-align:right; vertical-align: top; position:absolute; left:100; right: 100">
<!--All the other code here-->
</div>
我希望它完美无缺!