В интернете нашёл простой слайдер новостей
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();
});