Trình chiếu nội dung và hình ảnh sử dụng jQuery

Trình chiếu nội dung và hình ảnh sử dụng jQuery

Share |

Mày mò, lụm lặt bữa giờ mới ra được cái mã trình diễn ảnh kèm nội dung sử dụng jQuery cực đẹp này, hôm nay xin chia sẻ với các bạn. Cùng làm ngay bây giờ nào!



Xem: Demo

Trước hết bạn chèn đoạn mã sau vào trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

(function($){
$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

Chèn tiếp đoạn mã sau vào trước thẻ ]]></b:skin>

#s3slider {
width: 620px;
height: 300px;
position: relative;
overflow: hidden;
margin-top: 17px;
margin-bottom: 10px;
*margin-bottom: 0px;
background:#ffffff;
border: 1px solid #000;

}
#s3sliderContent {
width: 620px;
height:300px;
background:#ffffff;
position: absolute;
top: -13px;
*top: 0px;
padding: 0px;
list-style:none;
margin-left: 0;
overflow: hidden;
}

.s3sliderImage {
float: left;
position: relative;
display: none;
}

.s3sliderImage span {
position: absolute;
right: 0;
font:Georgia, serif;
padding: 10px 13px;
font-size:12px;
width:180px;
height:300px;
*max-height:300px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
top: 0;
overflow: hidden;
}

.s3sliderImage strong a{
color:$titlecolor;
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
font-size:20px;
}

Cuối cùng là tạo một HTML và dán đoạn mã sau vào:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Link_anh_1" />
<span><strong><a href="Link_lien_ket_1">Ten _anh_1</a></strong>

<p>Noi_dung_1</p>
</span>
</li>

<li class="s3sliderImage">
<img src="Link_anh_2" />
<span><strong><a href="Link_lien_ket_2">Ten _anh_2</a></strong>

<p>Noi_dung_2</p>
</span>
</li>

<li class="s3sliderImage">

<img src="Link_anh_3" />
<span><strong><a href="Link_lien_ket_3">Ten _anh_3</a></strong>

<p>Noi_dung_3</p>
</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

Tùy chỉnh Link cho phù hợp và Save

Nguồn: Nguyenlibra's blog