думаю, что многим бы хотелось иметь у себя на форуме
динамически меняющийся блок новостей или даже собственную рекламу
News slider
в html-верх плагин слайдера и стиль:
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<style type="text/css">
#slider {width:400px;
height:250px;
position:relative;
overflow:hidden;
left:250px;}#buttons {margin-left:250px;}
#mask-gallery {overflow:hidden;}
#gallery {/* Clear the list style */
list-style:none;
margin:0;
padding:0;
z-index:0;
/* width = total items multiply with #mask gallery width */
width:900px;
overflow:hidden;}#gallery li {float:left;}
#mask-excerpt {position:absolute;
top:0;
left:0;
z-index:500px;
width:100px;
overflow:hidden; }#excerpt {filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
list-style:none;
margin:0;
padding:0;
z-index:10;
position:absolute;
top:0;
left:0;/* Set the style */
width:100px;
background-color:#000;
overflow:hidden;
font-family:arial;
font-size:14px;
color:#fff;}#excerpt li {padding:5px;}
.clear {clear:both; }
</style>
в html-низ:
<script type="text/javascript">
$(document).ready(function() {
//Speed of the slideshow
var speed = 5000;
//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
//Assign a timer, so it will run periodically
var run = setInterval('newsslider(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsslider(0)', speed);
return false;
});
//Next Slide by calling the function
$('#btn-next').click(function () {
newsslider(0);
return false;
});
//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsslider(1);
return false;
});
//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsslider(0)', speed);
}
);
});
function newsslider(prev) {
//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
//if prev is set to 1 (previous item)
if (prev) {
//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
//if prev is set to 0 (next item)
} else {
//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');
//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');
//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800);
}
</script>и собственно сами новости или реклама
в Объявление:
<div id="slider">
<div id="mask-gallery"><ul id="gallery">
<li><img src="фоновое изображение для первой новости" width="400" height="250" alt=""/></li>
<li><img src="фоновое изображение для второй новости" width="400" height="250" alt=""/></li>
<li><img src="фоновое изображение для третьей новости" width="400" height="250" alt=""/></li></ul>
</div><div id="mask-excerpt">
<ul id="excerpt">
<li>Текст первой новости.</li>
<li>Текст второй новости.</li>
<li>Текст третьей новости.</li>
</ul>
</div></div>
<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-play">play</a>
<a href="#" id="btn-next">next</a></div>
сам блок новостей можно сделать по центру Объявления или сместить куда вам нужно
можно так же менять его размеры (выделил жёлтым)
надписи Next - Prev - Play - Pause тоже можно сменить на картинки
цвет шрифта в новостях можно менять
количество новостей с трёх увеличить до нужного вам
можно так же любую новость сделать кликабельной (нажав переходишь к более подробному прочтению)
и т.д.
Отредактировано Romych (Пн, 11 Ноя 2013 23:12:21)

