Простой слайдер новостей (помогите настроить)
В интернете нашёл простой слайдер новостей
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, время: 10:37. |