Ползунок Jquery Content со слайдом при наведении курсора на div. Цикл jquery - PullRequest
Новая
       76

Ползунок Jquery Content со слайдом при наведении курсора на div. Цикл jquery

0 голосов
/ 13 марта 2012

Хорошо, мы идем, это первый раз, когда я задаю вопрос здесь.до сих пор я только что прочитал и многому научился за последние несколько лет.

во всяком случае, это то, чего я пытаюсь достичь:

я хочу иметь слайдер контента, который будет выполнять автозагрузку изатухает.но также подключите это к различным div на той же странице.

, так что я смотрел на множество различных ползунков jquery (контента) сегодня.и решил работать с плагином JQuery цикла.это почти работает так, как я хочу.

но после более чем 4 часов поиска в Интернете и пробуя разные решения, я думаю, пришло время признать, что я сам не пойму это.

Я застрял с pageranchorbuilder, как я могу сделать это правильно?или куда мне идти отсюда?я надеюсь, что это достаточно ясно ... 

 <!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">

#nav { margin: 5px; }
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
#slideshow { text-align:left; margin-bottom:100px;}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.80.js"></script>
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
       fx:    'fade', 
    speed:  2500 ,
        pager:      '#nav',
        pagerEvent: 'mouseover',
        allowPagerClickBubble: true,
        pagerAnchorBuilder: function(i, el) {
            return '<div style="float:left;height:200px;width:100px;"><a href="' + el.src + '"><img src="http://cloud.github.com/downloads/malsup/cycle/beach'+ (i+1) +'.jpg" width="100" height:"100"/></a></div>';
        }
    });
});
</script>
</head>
<body>

        <div id="slideshow" class="pics">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
        </div>


<div id="nav"></div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 марта 2012

Я запустил твой код.

Я вижу, что зависание не работает постоянно

Я попытался использовать следующую версию сценария цикла 

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

и теперь он работает согласованно - надеюсь, так, как вы хотите.

Я использовал этот скрипт, так как он используется на демонстрационных страницах цикла jquery.

Я попытался загрузить сценарий с именем: jquery.cycle.all.latest.min.js со страницы загрузки, и он не работает, поэтому не уверен, в чем заключаются различия в сценариях.

0 голосов
/ 13 марта 2012

Я хочу иметь слайдер контента, который будет автоматически зацикливаться и исчезать. но также подключите это к различным div на той же странице.

Не могли бы вы подробнее рассказать о том, что именно вы пытаетесь достичь?

...