Показать сообщение отдельно
  #4 (permalink)  
Старый 16.07.2014, 13:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

cycle смена контента
zzzzz,
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<title>Slider</title>
<style>
.wrapper {
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    border: 2px solid #f00;
    width: 200px;
    height: 100px;
}
.wrapper ul {
    margin:0px;
    padding:0px
}
.slider {
    display: block;
    width:100%;
    height:100%;
}

.imageClass {
    width: 100%;
	height: 100%;
}

</style>
<script>
$(function () {
    var num = 0,  effects = "blindX,blindY,blindZ,cover,curtainX,curtainY,fade,fadeZoom,growX,growY,none,scrollUp,\
scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,\
turnUp,turnDown,turnLeft,turnRight,uncover,wipe,zoom".split(',');

    $('#animal').change(function () {
        if (!this.value) return;
        num = this.value; var len = Math.floor(Math.random()*effects.length)
        $('.slider:eq(' + num + ') ul').cycle('destroy');
        $('.slider').not(':eq(' + num + ')').hide();
        $('.slider:eq(' + num + ')').show().find('ul').cycle({
            fx: effects[len],
            speed: 'slow',
            timeout: 1000
        });

    }).change();
});
</script>
</head>
<body>
<div class="menu">
<label for="animal">Choose animal</label>
						<select id="animal" >
							<option value="0">animal 1 </option>
							<option value="1">animal 2</option>
							<option value="2">animal 3 </option>
							</select>
</div>
<div class="wrapper">
    <ul id="drowDownSlider">
        <li class="slider">
             <ul>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img1.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img2.jpg"/></li>
             </ul>
        </li>
        <li class="slider">
		<ul>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img3.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img4.jpg"/></li>
             </ul>
		</li>
        <li class="slider">
		<ul>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img5.jpg"/></li>
                  <li><img class="imageClass" src="http://www.a2zwebhelp.com/images/slider/img6.jpg"/></li>
             </ul>
		</li>

    </ul>
</div>
</body>
</html>

Последний раз редактировалось рони, 20.01.2016 в 23:56.
Ответить с цитированием