selftrips
@selftrips
selftrips.ru

Как вывести картинки одна на другой все разом и по клику на ссылку менять которая из них лежит «сверху» всех?

Установлен JS
<script type="text/javascript">
function l_image (a) {
    document.example_img.src=a
}
</script>

он ссылки вида
<a href="javascript:l_image ('http://site.ru/pic.jpg')">Текст</a>

по клику на них выводит в месте, где стоит код
<img src="/wp-content/uploads/2017/11/Музей-иллюзий.jpg" name="example_img"
  alt="Картинки для демонстрации работы скрипта смены изображений" width="100%">


ВОПРОС
Как сделать что все такие ссылки на странице сразу загружались в нужное место одна на другую, а "наверх" (т.е. перекрывала все остальные) нужная картинка выводилась по клику на соответствующую ссылку
  • Вопрос задан
  • 183 просмотра
Пригласить эксперта
Ответы на вопрос 2
Stalker_RED
@Stalker_RED
Вы так постепенно дойдете до того, что с нуля изобретете один из слайдеров.

https://bxslider.com/examples/image-slideshow-captions/
kenwheeler.github.io/slick
https://owlcarousel2.github.io/OwlCarousel2/demos/...
Ответ написан
KazeZlat
@KazeZlat
Погромист-затейник
Вообще тут даже JS не особо нужен, можно управиться одними HTML+CSS.

Как то так:
<p>
	Текст текст <a href="#one">ссыль1</a> текст <a href="#two">ссыль2</a>
	Еще текст лорем ипсум <a href="#three">все дела</a> сит амет 
	И еще <a href="#four">ссыль4</a>
</p>
<div class="slider">
	<img id="one"   src="image1.jpg">
	<img id="two"   src="image2.jpg">
	<img id="three" src="image3.jpg">
	<img id="four"  src="image4.jpg">
</div>
<style type="text/css">
	.slider {
		position: relative;
		overflow: hidden;
	}
	.slider img {
		display: none;
		position: absolute;
	}
	.slider img:target {
		display: inline;
	}
</style>

CSS-transition по вкусу, для появления плавного можно использовать вместо display свойства width или opacity вместе с transition
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы