Форум

zzzzz · #1 (**permalink**) 16.07.2014, 10:47

Я хочу создать скрипт, который при выборе варианта из dropdownlist сменял бы картинки в слайдшоу. Я решил попробовать использовать jquery cycle plugin и создать в списке под-списки картинок вот таким способом:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/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: 125px;
}
.wrapper ul {
    margin:0px;
    padding:0px 
}
.slider {
    width:100%;
    height:100%;
}

.imageClass {
    width: 100%;
	height: 100%;
}
</style>
<script>
var elem = document.getElementById('drowDownSlider');
var list = elem.getElementsByClassName('slider');  //создаю массив из списков
var e = document.getElementById("animal"); //индекс выбранного варианта из dropdownlist

var val = e.options[e.selectedIndex].value;  
$('list[val]').cycle({ //Как можно использовать метод cycle с элементом массива??

fx: 'fade', 
speed: 'slow', 
timeout: 1000 
});
</script>
</head>
<body>
<div class="menu">
<label for="animal">Animal</label>
						<select id="animal">
							<option>Choose animal </option>
							<option value="1">animal 1 </option>
							<option value="2">animal 2</option>
							<option value="3">animal 3 </option>
							</select>
</div>
<div class="wrapper">
    <ul id="drowDownSlider">
        <li class="slider">
             <ul> 
                  <li><img class="imageClass" src="images/img1.jpg"/></li>
                  <li><img class="imageClass" src="images/img2.jpg"/></li>       
             <ul>
        </li>  
        <li class="slider">
		<ul> 
                  <li><img class="imageClass" src="images/img3.jpg"/></li>
                  <li><img class="imageClass" src="images/img4.jpg"/></li>       
             <ul>
		</li>
        <li class="slider">
		<ul> 
                  <li><img class="imageClass" src="images/img5.jpg"/></li>
                  <li><img class="imageClass" src="images/img6.jpg"/></li>       
             <ul>
		</li> 
        
    </ul>
</div>
</body>
</html>

Я не уверен правильна ли моя логика. Подскажите, где подправить или другую альтернативную идею. Спасибо

рони · #2 (**permalink**) 16.07.2014, 11:11

zzzzz,
вы бы хоть ссылку на плагин дали .

zzzzz · #3 (**permalink**) 16.07.2014, 12:01

я использовал тюториал и файлы из этого сайта: http://www.a2zwebhelp.com/jquery-auto-image-rotator

рони · #4 (**permalink**) 16.07.2014, 13:45

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>

рони · #5 (**permalink**) 16.07.2014, 13:51

zzzzz,
http://learn.javascript.ru/play/jmERrb

Форум

Справочник

Discord чат

Курсы javascript