Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Нужна Ваша помощь в автоматической прокрутке слайдера (https://javascript.ru/forum/project/64868-nuzhna-vasha-pomoshh-v-avtomaticheskojj-prokrutke-slajjdera.html)

Sergyk85 10.09.2016 10:24
Нужна Ваша помощь в автоматической прокрутке слайдера
 
Прошу помочь с слайдером на css3, что нужно добавить в коде, чтобы картинку или текст сделать ссылкой, пробовал все известные мне варианты, не получается( 

<div class="slides">
<ul>
 <li><img alt="" src="http://www.luxurytravelagency.com/wp-content/uploads/2011/10/MontageBeverlyHills-550x300.jpg" title="Заголовок для изображения #1" />

 <div>Текст для слайдера #1</div>
 </li>
 <li><img alt="" src="http://www.fubiz.net/wp-content/uploads/2009/10/click1-550x300.jpg" title="Заголовок для изображения #2" />
 <div>Текст для слайдера #2</div>
 </li>
 <li><img alt="" src="http://www.thelostogle.com/wp-content/uploads/2014/04/Sun-City-Solar-Power-Oklahoma-Ranchwood_1-550x300.jpg" title="Заголовок для изображения #3" />
 <div>Текст для слайдера #3</div>
 </li>
 <li><img alt="" src="http://serviceyard.net/wp-content/uploads/2016/03/watermarked-2F25A71D00000578-0-image-a-10_1449517874588-550x300.jpg" title="Заголовок для изображения #4" />
 <div>Текст для слайдера #4</div>
 </li>
 <!-- сюда добавляем по необходимости еще слайды -->
</ul>
</div>



.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:550px;
}
.slides ul {
list-style:none;
position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}

.slides ul li {
opacity:0;
position:absolute;
top:0;

/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}

.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;

/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

Sergyk85 10.09.2016 10:45
Такой вариант пробовал <a href="адрес ссылки" ><img src="адрес картинки" ></a> - не работает, также пробовал <a href="адрес ссылки" >Название ссылки</a>...может не туда вставлял

рони 10.09.2016 11:56
Sergyk85,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .infoPanel div{
    display: none;
  }
  .slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:550px;
}
.slides ul {
list-style:none;
position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}

.slides ul li {
opacity:0;
position:absolute;
top:0;

/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}

.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;

/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var img = $(".infoPanel li a img").fadeTo(1,0.8), len = img.length,n = 0;

!function show() {
$("a.current").next().fadeOut();
$(".infoPanel li a.current img").fadeTo(1,0.8);
$("a.current").removeClass("current");

$(".infoPanel li a").eq(n).addClass("current");
$("a.current").next().fadeIn();
$(".infoPanel li a.current img").fadeTo(250,1);
n = ++n % len;
window.setTimeout(show, 1500)
}()

});

  </script>
</head>

<body>
<div id="content">
<ul class="infoPanel">
<li> <a href="#url" class="infoLink current"><img alt="" src="images/image1.jpg" style="opacity: 1;"> <span>Ведьмак 2: Убийцы королей</span>
<p>Игра 2011 года</p>
</a>
<div> <img alt="" src="images/image1.jpg"> </div>
</li>
<li> <a href="#url" class="infoLink"><img alt="" src="images/image2.jpg" style="opacity: 0.8;"><span>Dragon Age: Origins</span>
<p>Игра 2009 года</p>
</a>
<div> <img alt="" src="images/image2.jpg"> </div>
</li>
<li> <a href="#url" class="infoLink"><img alt="" src="images/image3.jpg" style="opacity: 0.8;"><span>TES: Skyrim</span>
<p>11.11.11</p>
</a>
<div> <img alt="" src="images/image3.jpg"> </div>
</li>
</ul>
</div>


</body>
</html>

Sergyk85 10.09.2016 12:47
Спасибо большое, от меня + в репутацию!

Правда, Вы помогли мне с предыдущей темой с автоматической прокруткой слайдера, а здесь я создал новую тему по уже другому слайдеру на css3, тут картинка меняется, но проблема в создании ссылки с картинки или текстового блока div.

рони 10.09.2016 14:49
Sergyk85,
напишите результат который хотите получить -- откуда адрес ссылки брать?

Sergyk85 10.09.2016 17:42
Нужно чтобы по нажатию на каждую картинку и/или текстовый блок можно было перейти на другую страницу сайта, т.е. сделать картинку и текст в виде ссылки.

http://ruseller.com/lessons/les1475/demo/index.html

рони 10.09.2016 19:35
Sergyk85,
все блоки находятся в стопке друг над другом, ссылку нельзя нажать так как она скрыта под невидимым блоком, решение : видимый блок поднять наверх, добавлен z-index в css.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:550px;
}
.slides ul {
list-style:none;
position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;  z-index: 0;
}
6% {
opacity:1; z-index: 100;
}
24% {
opacity:1;  z-index: 100;
}
30% {
opacity:0;  z-index: 0;
}
100% {
opacity:0;  z-index: 0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0; z-index: 0;
}
6% {
opacity:1; z-index: 100;
}
24% {
opacity:1; z-index: 100;
}
30% {
opacity:0; z-index: 0;
}
100% {
opacity:0; z-index: 0;
}
}

.slides ul li {
opacity:0;
position:absolute;
top:0;

/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-o-animation-name: anim_slides;
animation-name: anim_slides;
-moz-animation-name: anim_slides;
-o-animation-duration: 24.0s;
animation-duration: 24.0s;
-moz-animation-duration: 24.0s;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-direction: normal;
animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-delay: 0;
animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-play-state: running;
animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-o-animation-delay: 6.0s;
animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-o-animation-delay: 12.0s;
animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-o-animation-delay: 18.0s;
animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}

.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;

/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-o-animation-name: anim_titles;
animation-name: anim_titles;
-moz-animation-name: anim_titles;
-o-animation-duration: 24.0s;
animation-duration: 24.0s;
-moz-animation-duration: 24.0s;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-direction: normal;
animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-delay: 0;
animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-play-state: running;
animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {

});
  </script>
</head>

<body>
<div class="slides">
<ul>
 <li><img alt="" src="http://www.luxurytravelagency.com/wp-content/uploads/2011/10/MontageBeverlyHills-550x300.jpg" title="Заголовок для изображения #1" />

 <div><a href="http://javascript.ru/forum/">форум</a>Текст для слайдера #1</div>
 </li>
 <li><img alt="" src="http://www.fubiz.net/wp-content/uploads/2009/10/click1-550x300.jpg" title="Заголовок для изображения #2" />
 <div><a href="http://javascript.ru/forum/">форум</a>Текст для слайдера #2</div>
 </li>
 <li><img alt="" src="http://www.gizmonews.ru/wp-content/uploads/2013/01/Southern-Ocean.jpg" title="Заголовок для изображения #3" />
 <div><a href="http://javascript.ru/forum/">форум</a>Текст для слайдера #3</div>
 </li>
 <li><img alt="" src="http://serviceyard.net/wp-content/uploads/2016/03/watermarked-2F25A71D00000578-0-image-a-10_1449517874588-550x300.jpg" title="Заголовок для изображения #4" />
 <div><a href="http://javascript.ru/forum/">форум</a>Текст для слайдера #4</div>
 </li>
 <!-- сюда добавляем по необходимости еще слайды -->
</ul>
</div>


</body>
</html>

Sergyk85 10.09.2016 20:50
Понял, спасибо большое за помощь!


Часовой пояс GMT +3, время: 08:07.