Простой слайдер новостей (помогите настроить)
В интернете нашёл простой слайдер новостей
http://codepen.io/hobabe/pen/zGWQdB Как настроить скорость разобрался, помогите пожалуйста устраните перескакивание. вот код
<section class="courses" >
<article style="overflow:hidden;">
<figure>
<div id="slider">
<ul class="slides">
<li class="slide slide1"></li>
<li class="slide slide2"></li>
<li class="slide slide3"></li>
<li class="slide slide4"></li>
<li class="slide slide1"></li>
</ul>
</div>
</figure>
<figure id="border_left_hot">
<div class="news_not_selected">
<a href="">
<div id="details_news_home">Tin thứ 1:</div>
<div>dsfasdfasdfasdffsadf</div>
</a>
</div>
<div class="news_not_selected">
<a href="">
<div id="details_news_home">Tin thứ 2:</div>
<div>dsfasdfasdfasdf</div>
</a>
</div>
<div class="news_not_selected">
<a href="">
<div id="details_news_home">Tin thứ 3</div>
<div>dsfasdfasdfasdf</div>
</a>
</div>
<div class="news_not_selected">
<a href="">
<div id="details_news_home">Tin thứ 3</div>
<div>dsfasdfasdfasdf</div>
</a>
</div>
<div class="news_not_selected">
<a href="">
<div id="details_news_home">Tin thứ 3</div>
<div>dsfasdfasdfasdf</div>
</a>
</div>
</figure>
</section>
#slideshow { width: 269px; height: 240px; padding: 2px; box-shadow: 0 0 20px rgba(0,0,0,0.4); } .*{ display:block; } #slideshow > div { position: absolute; } #slideshow > div > img { width: 269px; height: 240px; } ul > li > img { width: 1885px; } #scrollingText div.scrollableArea p { display: block; float: left; margin: 0; padding: 0px 0px 20px 20px; font-family: Times, 'Times New Roman', Georgia, Serif; font-size:75px; font-weight: bold; background-color: #fff; color: #000; white-space: nowrap; } #border_left_hot { margin: 0px 0px; width: 374px; } #border_left_hot > div > a div { margin:0px 5px; } #details_news_home { font-weight:900; } /* begin slider*/ #slider { width: 300px; height: 240px; overflow: hidden; box-shadow: 4px 4px 2px #888888; } #slider .slides { display: block; width: 6000px; height: 400px; margin: 0; padding: 0; } #slider .slide { float: left; list-style-type: none; width: 300px; height: 400px; } #slider > ul > li > img { width:300px; height:200px; } /* helper css, since we don't have images */ .slide1 {background: red;} .slide2 {background: blue;} .slide3 {background: green;} .slide4 {background: purple;} section.courses { float: left; width: 698px; border-right: 1px solid #443e3e; } article { clear: both; overflow: auto; width: 100%; border:1px solid rgba(0, 0, 0, 0.25); } hgroup { margin-top: 40px; } article figure { float: left; width: 290px; height: 250px; padding: 5px; margin: 5px; } figcaption { font-size: 90%; text-align: left; } aside { width: 280px; float: left; padding: 0px 0px 0px 20px; } aside section a { display: block; padding: 10px; border-bottom: 1px solid #aeaca8; } aside section a:hover { color: #000000; background-color: #efefef; } nav a { font-weight: 900; color:#ffffff; text-decoration: none; } section a { color:#000000; text-decoration: none; } .news_selected{ border-left:3px solid #000000 ; padding:5px 5px; margin:5px 5px; } .news_not_selected { border-left:3px solid #9c9c9c ; padding:5px 5px; margin:5px 5px; }
$(function() {
//settings for slider
var width = 300;
var animationSpeed = 500;
var pause = 1000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $sliderNews = $('#border_left_hot');
var $slides = $('.slide', $slider);
var interval;
//tg
var tg=currentSlide-1;
function startSlider() {
pause=1000;
interval = setInterval(function() {
news_sl(currentSlide-1);
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause,function() {
});
}
function pauseSlider() {
clearInterval(interval);
}
function pauseSlider_news_hover() {
pause=0;
clearInterval(interval);
news_hot_hover();
}
//select news follow slider img
function news_sl(nb) {
if(nb===0)
{
$("#border_left_hot > div:eq(3)").removeClass('news_selected');
$("#border_left_hot > div:eq(3)").addClass('news_not_selected ');
}
$("#border_left_hot > div:eq("+nb+")").removeClass('news_not_selected');
$("#border_left_hot > div:eq("+nb+")").addClass('news_selected');
$("#border_left_hot > div:eq("+nb+")").prev().removeClass('news_selected');
$("#border_left_hot > div:eq("+nb+")").prev().addClass('news_not_selected');
}
//set selected news
function select_news_hover () {
var li = $('#border_left_hot > div');
li.on("mouseover", function(event){
var myindex = li.index(this);
currentSlide=myindex+1;
$slideContainer.animate({'margin-left': '-'+currentSlide*300});
$('#border_left_hot > div').each(function(){
$(this).removeClass("news_selected");
$(this).addClass("news_not_selected");
});
$('#border_left_hot > div:eq('+myindex+')').removeClass("news_not_selected");
$('#border_left_hot > div:eq('+myindex+')').addClass("news_selected");
});
}
//News hover
function news_hot_hover(){
select_news_hover();
}
//fc stop slider
function pause_sl() {
}
//fc play slider
function play_sl() {
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
$sliderNews
.on('mouseenter', pauseSlider_news_hover)
.on('mouseleave', startSlider);
startSlider();
});
|
Вы бы лучше чем постить столько кода объяснили что такое перескакивание и как оно проявляется :)
|
| Часовой пояс GMT +3, время: 17:16. |