Jquery在列表中旋转图片
在我的页面中，我有一个列表，我使用Jquery的旋转方法，并在Firefox中正常工作但不在Chrome中。
火狐：
铬：
正如您在镀铬框中看到的第一张图片中的图片为空，并在第二个框中显示。
HTML：
<div class="m-main-tbl m-b-s">
<div>
<span class="m-main-image"><img id="big-img" src="images/cute-baby.png"/></span>
</div>
<div>
<span class="m-main-more-info">
<p class="title m-p1"><a class="m-a1" href="#">Clothes</a></p>
<p class="info m-p3">
<span class="p-two-2 p-green-2">3 day</span>
<span class="m-p3 p-two-2 p-ex">until end</span>
<span class="m-p3 p-two-2 p-span-m">|</span>
<span class="m-p3 p-two-2 p-green-2">450/000 $</span>
<span class="p-two-2">Support</span>
<span class="p-two-2 p-left"><a class="m-a2" href="#">More...</a></span>
</p>
</span>
</div>
<div>
<span class="m-left-tbl">
<div class="m-box-show m-first-div">
<img class="m-div-image" src="images/cute-baby.thm.png"/>
<div class="m-first-div2">
<p class="title m-p1"><a class="m-a1" href="#">Clothes</a></p>
<p class="m-p2">Clothes for childrens</p>
<p class="info m-p3">
<span class="p-two-2 p-green-2">3 day</span>
<span class="m-p3 p-two-2 p-ex">until end</span>
<span class="m-p3 p-two-2 p-span-m">|</span>
<span class="m-p3 p-two-2 p-green-2">450/000</span>
<span class="p-two-2">Support</span>
<span class="p-two-2 p-left"><a class="m-a2" href="#">More...</a></span>
</p>
<p class="m-p-last">
<span class="m-p3 p-two-2">Status</span>
<div class="m-progress">
<div class="m-progress-green"></div>
</div>
<button class="m-btn-success">Support</button>
</p>
</div>
</div>
<div class="m-box-show m-second-div m-first-div">
<img class="m-div-image" src="images/image.thm.png"/>
<div class="m-first-div2">
<p class="title m-p1"><a class="m-a1" href="#">Magic Ring</a></p>
<p class="m-p2">Magic ring for you</p>
<p class="info m-p3">
<span class="p-two-2 p-green-2">3 day</span>
<span class="m-p3 p-two-2 p-ex">until end</span>
<span class="m-p3 p-two-2 p-span-m">|</span>
<span class="m-p3 p-two-2 p-green-2">450/000</span>
<span class="p-two-2">Support</span>
<span class="p-two-2 p-left"><a class="m-a2" href="#">More...</a></span>
</p>
<p class="m-p-last">
<span class="m-p3 p-two-2">Status</span>
<div class="m-progress">
<div class="m-progress-green"></div>
</div>
<button class="m-btn-success">Support</button>
</p>
</div>
</div>
<div class="m-box-show m-second-div m-first-div">
<img class="m-div-image" src="images/image3.thm.png"/>
<div class="m-first-div2">
<p class="title m-p1"><a class="m-a1" href="#">Glasses</a></p>
<p class="m-p2">Glasses for you</p>
<p class="info m-p3">
<span class="p-two-2 p-green-2">3 day</span>
<span class="m-p3 p-two-2 p-ex">until end</span>
<span class="m-p3 p-two-2 p-span-m">|</span>
<span class="m-p3 p-two-2 p-green-2">450/000</span>
<span class="p-two-2">Support</span>
<span class="p-two-2 p-left"><a class="m-a2" href="#">More...</a></span>
</p>
<p class="m-p-last">
<span class="m-p3 p-two-2">Status</span>
<div class="m-progress">
<div class="m-progress-green"></div>
</div>
<button class="m-btn-success">Support</button>
</p>
</div>
</div>
<div class="m-box-show m-second-div m-first-div">
<img class="m-div-image" src="images/image3.thm.png"/>
<div class="m-first-div2">
<p class="title m-p1"><a class="m-a1" href="#">Glasses</a></p>
<p class="m-p2">Glasses for you</p>
<p class="info m-p3">
<span class="p-two-2 p-green-2">3 day</span>
<span class="m-p3 p-two-2 p-ex">until end</span>
<span class="m-p3 p-two-2 p-span-m">|</span>
<span class="m-p3 p-two-2 p-green-2">450/000</span>
<span class="p-two-2">Support</span>
<span class="p-two-2 p-left"><a class="m-a2" href="#">More...</a></span>
</p>
<p class="m-p-last">
<span class="m-p3 p-two-2">Status</span>
<div class="m-progress">
<div class="m-progress-green"></div>
</div>
<button class="m-btn-success">Support</button>
</p>
</div>
</div>
<div class="m-box-show m-second-div m-first-div">
<img class="m-div-image" src="images/image3.thm.png"/>
<div class="m-first-div2">
<p class="title m-p1"><a class="m-a1" href="#">Glasses</a></p>
<p class="m-p2">Glasses for you</p>
<p class="info m-p3">
<span class="p-two-2 p-green-2">3 day</span>
<span class="m-p3 p-two-2 p-ex">until end</span>
<span class="m-p3 p-two-2 p-span-m">|</span>
<span class="m-p3 p-two-2 p-green-2">450/000</span>
<span class="p-two-2">Support</span>
<span class="p-two-2 p-left"><a class="m-a2" href="#">More...</a></span>
</p>
<p class="m-p-last">
<span class="m-p3 p-two-2">Status</span>
<div class="m-progress">
<div class="m-progress-green"></div>
</div>
<button class="m-btn-success">Support</button>
</p>
</div>
</div>
<div class="m-box-show m-second-div m-first-div">
<img class="m-div-image" src="images/image3.thm.png"/>
<div class="m-first-div2">
<p class="title m-p1"><a class="m-a1" href="#">Glasses</a></p>
<p class="m-p2">Glasses for you</p>
<p class="info m-p3">
<span class="p-two-2 p-green-2">3 day</span>
<span class="m-p3 p-two-2 p-ex">until end</span>
<span class="m-p3 p-two-2 p-span-m">|</span>
<span class="m-p3 p-two-2 p-green-2">450/000</span>
<span class="p-two-2">Support</span>
<span class="p-two-2 p-left"><a class="m-a2" href="#">More...</a></span>
</p>
<p class="m-p-last">
<span class="m-p3 p-two-2">Status</span>
<div class="m-progress">
<div class="m-progress-green"></div>
</div>
<button class="m-btn-success">Support</button>
</p>
</div>
</div>
</span>
</div>
</div>
Jquery的：
function rotatePics(){
var first = $('.m-box-show:first');
var height = first.height();
first.fadeOut('slow', function() {
first.detach();
var next = $('.m-box-show:first');
next.removeClass('m-second-div');
next.css('margin-top', height + 'px');
first.insertAfter('.m-box-show:last');
next.animate({marginTop: 0}, 1000);
first.css('margin-top', '5px');
first.addClass('m-second-div');
first.fadeIn();
var more = $('.m-main-more-info');
more.find('.title').html(next.find('.title').html());
more.find('.info').html(next.find('.info').html());
$('#big-img').attr('src', next.find('img').attr('src').replace('.thm',''));
});
}
我该如何解决？谢谢。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？