#javascript #jquery #ajax #json
#javascript #jquery #ajax #json
Вопрос:
Последние несколько дней мы изо всех сил пытались создать слайдер изображений.
По сути, все, что нам нужно, это список изображений, например:
<ul id="images">
<li id="1">http://www.site.com/image1.jpg</li>
<li id="2">http://www.site.com/image2.jpg</li>
<li id="3">http://www.site.com/image3.jpg</li>
<li id="4">http://www.site.com/image4.jpg</li>
<li id="5">http://www.site.com/image5.jpg</li>
</ul>
<div id="imageshow"> photo X of TOTAL </div>
<a id="prev">previous</a>
<a id="next">next</a>
Таким образом, в основном содержимое UL представляет собой массив изображений, imageshow div будет областью содержимого, в которой будет отображаться текущее выбранное изображение, а ссылки prev и next прокручивают изображения.
Мы хотим, чтобы одновременно выбиралось только одно изображение, и изображение можно изменить с помощью ссылок prev и next.
Мы нашли похожие на это скрипты в Интернете, но они поставляются с другими функциями, которые нам не нужны, и они просто загромождают страницу. Нам также нужно, чтобы этот скрипт работал на странице более одного раза, поскольку эта страница будет содержать 2, 3, 4 или даже больше этой функции, поэтому этот скроллер изображений должен будет работать для каждого из них, если вы понимаете, что я имею в виду.
Как мы можем это сделать? Таким образом, мы можем эмулировать что-то, похожее на изображение ниже:
http://i53.tinypic.com/21b18pe.jpg
Спасибо 🙂
Комментарии:
1. Я предполагаю, что он хочет загрузить несколько экземпляров разных галерей на одной странице, и большинство галерей требуют, чтобы массив был загружен на страницу, поэтому json, возможно, является более чистым методом. Запущен из запросов ajax. Просто предположение
Ответ №1:
Ответ №2:
как насчет чего-то подобного (непроверенного):
<script>
var imageArray=Array("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg");
var spot=0;
document.getElementById('imageshow').innerHTML="<img src="" imageArray(spot) ""/><br/>Photo " (spot 1) " of " imageArray.length;
function nextpic(){
spot ;
if((spot 1)==imageArray.length){spot=0;}
document.getElementById('imageshow').innerHTML="<img src="" imageArray(spot) ""/><br/>Photo " (spot 1) " of " imageArray.length;
}
function prepic(){
spot--;
if((spot<0){spot=imageArray.length;}
document.getElementById('imageshow').innerHTML="<img src="" imageArray(spot) ""/><br/>Photo " (spot 1) " of " imageArray.length";
}
</script>
<div id="imageshow"></div>
<a id="prev" onclick="prepic()">previous</a>
<a id="next" onclick="nextpic()">next</a>