Использование JQuery Cycle Plugin с со списком изображений
Я хочу создать скрипт, который при выборе варианта из 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>
Я не уверен правильна ли моя логика. Подскажите, где подправить или другую альтернативную идею. Спасибо |
zzzzz,
вы бы хоть ссылку на плагин дали . |
я использовал тюториал и файлы из этого сайта: http://www.a2zwebhelp.com/jquery-auto-image-rotator
|
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>
|
|
| Часовой пояс GMT +3, время: 19:07. |