Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2015, 20:56
Новичок на форуме
Отправить личное сообщение для Алексей777555 Посмотреть профиль Найти все сообщения от Алексей777555
 
Регистрация: 11.11.2014
Сообщений: 7

Простой слайдер новостей (помогите настроить)
В интернете нашёл простой слайдер новостей

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();
    
});
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2015, 01:35
Интересующийся
Отправить личное сообщение для skeef Посмотреть профиль Найти все сообщения от skeef
 
Регистрация: 13.04.2011
Сообщений: 25

Вы бы лучше чем постить столько кода объяснили что такое перескакивание и как оно проявляется
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите подружить слайдер с input Alex57B Элементы интерфейса 17 19.10.2016 12:28
Помогите доделать слайдер malevi4 Общие вопросы Javascript 3 23.05.2015 23:18
Слайдер - карусель блоков (помогите пожалуйста) Viktor.Poberezhniy Общие вопросы Javascript 3 22.07.2014 11:46
Помогите найти похожий слайдер Maxim_sheva Элементы интерфейса 5 12.11.2013 12:05
Помогите настроить слайдер на автопроигрывание Scripter Общие вопросы Javascript 5 08.02.2013 23:04