Flexslider 无法使用 Jquery 处理自动生成的内容
Flexslider not working on auto generated content with Jquery
我有一个包含帖子内容的文本区域,当帖子不止图像时,我想使用 Flexslider Jquery 插件制作一个滑块,但不幸的是插件不起作用。
网页代码
<textarea id='summary7731158085902631382' style='display:none;'>
<div dir="ltr" style="text-align: left;">
<a href="http://1.bp.blogspot.com/-tqkOgHfEp10/VKHDxv709UI/AAAAAAAABKo/IA6lz5cdGfE/s1600/unsplash_1.jpg">
<img src="http://1.bp.blogspot.com/-tqkOgHfEp10/VKHDxv709UI/AAAAAAAABKo/IA6lz5cdGfE/s1600/unsplash_1.jpg" />
</a>
<a href="http://1.bp.blogspot.com/-88jaynpnczQ/VKHDxr9NHXI/AAAAAAAABKs/PusKWOwGCYw/s1600/unsplash_2.jpg">
<img src="http://1.bp.blogspot.com/-88jaynpnczQ/VKHDxr9NHXI/AAAAAAAABKs/PusKWOwGCYw/s1600/unsplash_2.jpg" />
</a>
<a href="http://3.bp.blogspot.com/-JY0gtfw46YY/VKHDxgz63KI/AAAAAAAABK0/r0mvJkP_FE0/s1600/unsplash_3.jpg">
<img src="http://3.bp.blogspot.com/-JY0gtfw46YY/VKHDxgz63KI/AAAAAAAABK0/r0mvJkP_FE0/s1600/unsplash_3.jpg" /></a>
<br />
<p>Cras sit amet libero eros, in ultricies lorem. Nunc et odio neque. Maecenas vehicula interdum hendrerit. Integer hendrerit orci ullamcorper neque pellentesque feugiat. Aliquam magna metus, fringilla non ultrices id, fringilla eu erat. Phasellus lorem tortor, porttitor volutpat iaculis sed, condimentum ultricies massa. Curabitur ut malesuada elit. Nullam tortor mi, faucibus a laoreet a, ultricies ut est. Etiam erat urna, dapibus vitae sodales eu, sagittis ut nisl. Curabitur vitae tristique felis. Donec consectetur porttitor lectus ac pharetra. Mauris nulla nisi, congue quis eleifend at, dapibus eget augue. Curabitur nunc sem, feugiat sit amet facilisis quis, laoreet id mi.
</p>
</div>
</textarea>
<div id='content'></div>
Jquery 代码
var sum = '',
content = $('#summary7731158085902631382').val(),
imgs = $(content).find('img');
if (imgs.length > 1) {
sum = '<div class="flexslider"><ul>';
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i].src;
sum += '<li><a href="' + img + '"><img alt="" src="' + img + '"></a></li>';
}
sum += '</ul></div>';
}
$('#content').html(sum);
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
smoothHeight: true,
prevText: "",
nextText: ""
});
小提琴演示
只需在 ul 标签中添加一个类,即 "slide" : 小提琴
sum = '<div class="flexslider"><ul class="slides">';
相关文章:
- 自动生成的用户名
- 从现有html自动生成html源文档
- 使用Google Feeds API使用“tap”在jquery mobile中自动生成feed列表
- Div 自动生成时自动关闭
- 如何选择由 DevExpress constrols 使用 Javascript DOM 技术自动生成的 html “i
- 数据表自动生成的序列号无法正常工作.对于每一页
- 数组中自动生成的一组值
- 我可以自动生成一个jquery块,对不同的元素做同样的事情吗
- 弹出窗口自动生成无边界
- 在文本框中自动生成值
- SignalR Jquery自动生成Div
- 如何自动生成目录
- 从JSON模式自动生成JavaScript
- 如何在FineUploader上传到s3时获得客户端自动生成的uuid
- 如何获取插入到表中的行的自动生成的ID
- Firebase-如何找到所有具有自动生成ID的匹配项,其中值为false
- 使用javascript从字符串中自动生成标记
- 在HTML表单中使用自动生成(即随机)的ID
- 如何自动单击 AJAX 响应处理程序中自动生成的链接
- Flexslider 无法使用 Jquery 处理自动生成的内容