[Hỏi đáp] Slideshow đơn giản cho mod_new
29.03.14 15:481
29.03.14 19:392
Demo
http://jsfiddle.net/baivong/WP5Sg/show/
Source
HTML
- Code:
<div id="zzSlide">
<div class="zzContent">
<div class="zzItem">
<div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/xcv11.jpg)"></div>
<div class="zzCaption">Divide and Fight 2.21</div>
</div>
<div class="zzItem">
<div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/cfb10.jpg)"></div>
<div class="zzCaption">Divide and Fight 2.20d</div>
</div>
<div class="zzItem">
<div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/1136.jpg)"></div>
<div class="zzCaption">Divide and Fight 2.19c</div>
</div>
<div class="zzItem">
<div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/cv_bmp10.jpg)"></div>
<div class="zzCaption">Divide and Fight 2.19b</div>
</div>
<div class="zzItem">
<div class="zzImage" style="background-image:url(http://i72.servimg.com/u/f72/16/18/15/10/untit250.jpg)"></div>
<div class="zzCaption">Divide and Fight 2.18e</div>
</div>
</div>
<div class="zzBullets"></div>
</div>
CSS
- Code:
#zzSlide {
margin: 0 auto;
width: 235px;
}
#zzSlide > div.zzContent {
position: relative;
width: inherit;
height: 200px;
}
#zzSlide div.zzItem {
position: absolute;
left: 0;
top: 0;
width: inherit;
}
#zzSlide div.zzImage {
background: none no-repeat center center/100% 100% #333;
height: 155px;
width: inherit;
border: 5px solid #FFF;
outline: 1px solid #DDD
}
#zzSlide div.zzCaption {
background: #FFF;
padding: 5px 0;
}
#zzSlide > div.zzBullets {
text-align: center;
}
#zzSlide .zzBullet {
display: none;
}
#zzSlide .zzBullet + label {
width: 7px;
height: 7px;
outline: 1px solid #DDD;
background: #FFF;
display: inline-block;
outline-offset: 2px;
margin: 0 7px;
cursor: pointer;
}
#zzSlide .zzBullet:checked + label {
background: #666;
}
Javascript
- Code:
/*!
zzSlide v0.2.0
A Simple jQuery Slideshow
Copyleft (c) 2014+ Zzbaivong
http://devs.forumvi.com
*/
var zzSlide = {
start: function() {
zzSlide.run = setInterval(function() {
zzSlide.current++;
zzSlide.current == zzSlide.size && (zzSlide.current = 0);
$("#zzSlide .zzItem").fadeOut('slow');
$("#zzSlide .zzItem").eq(zzSlide.current).fadeIn('slow');
$("#zzSlide .zzBullet").eq(zzSlide.current).prop("checked", true);
}, 3000);
},
current: 0,
size: $("#zzSlide .zzItem").length,
run: "",
init: function() {
$("#zzSlide .zzItem").each(function(index) {
$(this).attr({
"data-bullet": index
});
$("#zzSlide .zzBullets").append('<input type="radio" class="zzBullet" name="zzbullet" value="' + index + '" id="zzbullet' + index + '" /><label for="zzbullet' + index + '"></label></div>');
});
$("#zzSlide .zzItem:gt(0)").hide();
$("#zzSlide .zzBullet:eq(0)").prop("checked", true);
zzSlide.start();
$("#zzSlide").hover(function() {
clearInterval(zzSlide.run);
}, function() {
zzSlide.start();
});
$("#zzSlide .zzBullet").on("change", function() {
$("#zzSlide .zzItem").fadeOut(1E3);
$("#zzSlide .zzItem[data-bullet='" + this.value + "']").fadeIn('slow');
zzSlide.current = this.value;
});
}
};
$(function() {
zzSlide.init();
});
Tags: #jquery #snippet
30.03.14 5:013
có thêm 1 nút Next thì tuyệt bác ạ
30.03.14 5:034
Không cần thiết với dạng này.
30.03.14 13:545
Tôi dùng cho mod new lại k thấy nó chạy :(
đây là code cũ t đang dùng nè
đây là code cũ t đang dùng nè
- Code:
<div style="height:193px;overflow:hidden;margin-bottom:4px;display:inline-block;width:210px;float:left" id="demo">
<!-- BEGIN post_row --><span class="show_topic">
<a href="{post_row.U_VIEW_COMMENTS}" class="ava_new">
{post_row.TEXT}
</a>
<a href="{post_row.U_VIEW_COMMENTS}" class="a_new">{post_row.TITLE}</a>
<p class="author">{BY} <strong>{post_row.POSTER}</strong> {post_row.TIME}</p>
</span>
<!-- END post_row --></div>
<div class="phu1" align="right">
<span class="active" id="1"></span><span id="2"></span><span id="3"></span><span id="4"></span><span id="5"></span></div>
<script>
$(".phu1 span").click(function () {
$(".phu1 span").removeClass("active");
$(this).addClass("active");
var a = eval($(this).attr("id"));
var b = a - 1;
if (a == 3) {
b == 0
}
$("#demo .show_topic").hide();
$("#demo .show_topic:eq(" + b + ")").show();
});
</script>
30.03.14 16:526
Thay hết vào mod_new:
- Code:
<style type="text/css">
#zzSlide{width:235px;padding:10px;margin:0 auto}
#zzSlide > div.zzContent{position:relative;width:inherit;height:215px}
#zzSlide div.zzItem{position:absolute;left:0;top:0;width:inherit}
#zzSlide div.zzImage{background:none no-repeat center center/100% 100% #333;height:155px;width:inherit;border:5px solid #FFF;outline:1px solid #DDD}
#zzSlide div.zzCaption{background:#FFF;padding:5px 0}
#zzSlide p.zzTitle a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
#zzSlide p.author{font-size:11px;color:#999}
#zzSlide > div.zzBullets{text-align:center}
#zzSlide .zzBullet{display:none}
#zzSlide .zzBullet + label{width:7px;height:7px;outline:1px solid #DDD;background:#FFF;display:inline-block;outline-offset:2px;cursor:pointer;margin:0 7px}
#zzSlide .zzBullet:checked + label{background:#666}
</style>
<div id="zzSlide">
<div class="zzContent">
<!-- BEGIN post_row -->
<div class="zzItem">
<div class="zzImage">
{post_row.TEXT}
</div>
<div class="zzCaption">
<p class="zzTitle">
<a href="{post_row.U_VIEW_COMMENTS}" title="{post_row.TITLE}">{post_row.TITLE}</a>
</p>
<p class="author">Đăng bởi: <strong>{post_row.POSTER}</strong></p>
</div>
</div>
<!-- END post_row -->
</div>
<div class="zzBullets"></div>
</div>
<script type="text/javascript">
//<![CDATA[
/*!
zzSlide v0.2.0
A Simple jQuery Slideshow
Copyleft (c) 2014+ Zzbaivong
http://devs.forumvi.com
*/
var zzSlide = {
start: function() {
zzSlide.run = setInterval(function() {
zzSlide.current++;
zzSlide.current == zzSlide.size && (zzSlide.current = 0);
$("#zzSlide .zzItem").fadeOut('slow');
$("#zzSlide .zzItem").eq(zzSlide.current).fadeIn('slow');
$("#zzSlide .zzBullet").eq(zzSlide.current).prop("checked", true);
}, 3000);
},
current: 0,
size: $("#zzSlide .zzItem").length,
run: "",
init: function() {
$("#zzSlide .zzItem").each(function(index) {
$(this).attr({
"data-bullet": index
});
$("#zzSlide .zzBullets").append('<input type="radio" class="zzBullet" name="zzbullet" value="' + index + '" id="zzbullet' + index + '" /><label for="zzbullet' + index + '"></label></div>');
});
$("#zzSlide .zzItem:gt(0)").hide();
$("#zzSlide .zzBullet:eq(0)").prop("checked", true);
zzSlide.start();
$("#zzSlide").hover(function() {
clearInterval(zzSlide.run);
}, function() {
zzSlide.start();
});
$("#zzSlide .zzBullet").on("change", function() {
$("#zzSlide .zzItem").fadeOut(1E3);
$("#zzSlide .zzItem[data-bullet='" + this.value + "']").fadeIn('slow');
zzSlide.current = this.value;
});
}
};
$("#zzSlide .zzImage").css("background-image", function() {
return "url(" + $(this).find("img:first")[0].src + ")";
}).empty();
$(function() {
zzSlide.init();
});
//]]>
</script>
22.07.15 17:227
z để nó slideshow ko chạy thì s hử bác
23.07.15 17:498
phutu01 wrote:Tôi dùng cho mod new lại k thấy nó chạy :(
đây là code cũ t đang dùng nè
- Code:
<div style="height:193px;overflow:hidden;margin-bottom:4px;display:inline-block;width:210px;float:left" id="demo">
<!-- BEGIN post_row --><span class="show_topic">
<a href="{post_row.U_VIEW_COMMENTS}" class="ava_new">
{post_row.TEXT}
</a>
<a href="{post_row.U_VIEW_COMMENTS}" class="a_new">{post_row.TITLE}</a>
<p class="author">{BY} <strong>{post_row.POSTER}</strong> {post_row.TIME}</p>
</span>
<!-- END post_row --></div>
<div class="phu1" align="right">
<span class="active" id="1"></span><span id="2"></span><span id="3"></span><span id="4"></span><span id="5"></span></div>
<script>
$(".phu1 span").click(function () {
$(".phu1 span").removeClass("active");
$(this).addClass("active");
var a = eval($(this).attr("id"));
var b = a - 1;
if (a == 3) {
b == 0
}
$("#demo .show_topic").hide();
$("#demo .show_topic:eq(" + b + ")").show();
});
</script>
@Zzbaivong làm cái load feed được không
24.07.15 11:459
Tại sao mình cho slideshow lặp lại nhiều lần trong 1 page thì chỉ duy nhất 1 cái load qua hình khác dc
24.07.15 12:0010
Vì ban đầu code này chỉ viết cho kiểu 1 slide.
24.07.15 16:4911
mình làm được cái load feed nhưng mà cho nó lặp đi lặp lại không được. Nó hiện tới cái cuối cùng thì đứng im ko hiện nữa
24.07.15 17:0212
25.07.15 8:2113
Thêm nút next cho mình được không với hiện hiệu ứng load khi chưa tải xong thanks :)
- Code:
<div id="zzSlide">
<div class="zzContent">
</div>
<div class="zzBullets"></div>
</div>
<style>
#zzSlide {
margin: 0 auto;
width: 235px;
}
#zzSlide > div.zzContent {
position: relative;
width: inherit;
height: 200px;
}
#zzSlide div.zzItem {
position: absolute;
left: 0;
top: 0;
width: inherit;
}
#zzSlide div.zzImage {
background: none no-repeat center center/100% 100% #333;
height: 155px;
width: inherit;
border: 5px solid #FFF;
outline: 1px solid #DDD
}
#zzSlide div.zzCaption {
background: #FFF;
padding: 5px 0;
}
#zzSlide > div.zzBullets {
text-align: center;
}
#zzSlide .zzBullet {
display: none;
}
#zzSlide .zzBullet + label {
width: 7px;
height: 7px;
outline: 1px solid #DDD;
background: #FFF;
display: inline-block;
outline-offset: 2px;
margin: 0 7px;
cursor: pointer;
}
#zzSlide .zzBullet:checked + label {
background: #666;
}
#zzSlide div.zzImage img{background:none no-repeat center center/100% 100% #333;height:155px!important;width:inherit!important}
</style>
<script>
$(function() {
$.get('/feed/?f=9').done(function(data) {
var getfeed = $(data);
for(j = 0;j < getfeed.find('item').length; j++){
var url = getfeed.find('item:eq('+j+') guid').text();
var title = getfeed.find('item:eq('+j+') title').text();
$('.zzContent').append('<div class="zzItem" id="id' + j + '"><div class="zzImage"></div><div class="zzCaption"><a href="' + url + '" title="' + title + '">' + title + '</a></div></div>');
$('#id' + j + ' .zzImage').load(url + ' .noidungblog img:first');
}
});
});
/*!
zzSlide v0.1
A Simple jQuery Slideshow
Copyright (c) 2014+ Zzbaivong
http://devs.forumvi.com
*/
var zzSlide = {
b: function () {
zzSlide.c = setInterval(function () {
zzSlide.a++;
zzSlide.a == zzSlide.d && (zzSlide.a = 0);
$("#zzSlide .zzItem").fadeOut(1E3);
$("#zzSlide .zzItem").eq(zzSlide.a).fadeIn(1E3);
$("#zzSlide .zzBullet").eq(zzSlide.a).prop("checked", !0)
}, 3E3)
},
a: 0,
d: $("#zzSlide .zzItem").length,
c: "",
s: function () {
$("#zzSlide .zzItem").each(function (a) {
$(this).attr({
"data-bullet": a
});
$("#zzSlide .zzBullets").append('<input type="radio" class="zzBullet" name="zzbullet" value="' + a + '" id="zzbullet' + a + '" /><label for="zzbullet' + a + '"></label></div>')
});
$("#zzSlide .zzItem:gt(0)").hide();
$("#zzSlide .zzBullet:eq(0)").prop("checked", !0);
zzSlide.b();
$("#zzSlide").hover(function () {
clearInterval(zzSlide.c)
}, function () {
zzSlide.b()
});
$("#zzSlide .zzBullet").on("change", function () {
$("#zzSlide .zzItem").fadeOut(1E3);
$("#zzSlide .zzItem[data-bullet='" + this.value + "']").fadeIn(1E3);
zzSlide.a = this.value
})
}
};
$(function () {
zzSlide.s()
});
</script>