#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
итак, у меня настроена навигация, при которой всякий раз, когда вы нажимаете на определенную часть навигации, появляется другой раздел.
К сожалению, я работаю в HTML 4 и, похоже, не могу найти подходящие ползунки для этого.
Ниже приведено изображение двух ползунков, которые я хотел бы выполнить, ползунок 1 — это ползунок продукта, а ползунок два — вертикальный ползунок, содержащий разные видео. В нашей CMS все это должно быть просто изображениями, которые при нажатии изменят показанное видео, которое вы видите больше на странице. затем, когда вы нажимаете на избранное видео, появляется и воспроизводится видео «prettyPhoto».
Вот код, который я использовал:
<!-- HEADER -->
<div class="top-message-container">
<div class="inner-container">
<div class="topHeroImage">
<img src="images/core_head_logo.png" alt="Evans '56 Calftone">
<div class="header_intro_text">Get started by choosing your instrument below</b>.
</div>
</div>
</div>
</div>
<!-- - END HEADER -->
<!-- NAVIGATION ... -->
<div class="navigation-container">
<div class="inner-container">
<a href="#1"><img src="images/guitar_bass-icon.png"></a> <a href="#2"><img src="images/percussion-icon.png"></a> <a href="#3"><img src="images/orchestral-icon.png"></a> <a href="#4"><img src="images/woodwinds-icon.png"></a>
</div>
<div class="main-video-container">
<div class="fret_vids" id="1">
<div class="videoPlayer" id="video1" style="display: none;">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a>
</div>
</div>
<div class="videoPlayer" id="video2" style="display: none">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a>
</div>
</div>
<div class="videoPlayer" id="video3" style="display: none">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a>
</div>
</div>
<div class="videoPlayer" id="video4" style="display:">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a>
</div>
</div>
</div>
<div class="perc_vids" id="2">
<div class="videoPlayer" id="video1" style="display: none;">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a>
</div>
</div>
<div class="videoPlayer" id="video2" style="display: none">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a>
</div>
</div>
<div class="videoPlayer" id="video3" style="display: none">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a>
</div>
</div>
<div class="videoPlayer" id="video4" style="display:">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a>
</div>
</div>
</div>
<div class="orch_vids" id="3">
<div class="videoPlayer" id="video1" style="display: none;">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a>
</div>
</div>
<div class="videoPlayer" id="video2" style="display: none">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a>
</div>
</div>
<div class="videoPlayer" id="video3" style="display: none">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a>
</div>
</div>
<div class="videoPlayer" id="video4" style="display:">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a>
</div>
</div>
</div>
<div class="wood_vids" id="4">
<div class="videoPlayer" id="video1" style="display: none;">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a>
</div>
</div>
<div class="videoPlayer" id="video2" style="display: none">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a>
</div>
</div>
<div class="videoPlayer" id="video3" style="display: none">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a>
</div>
</div>
<div class="videoPlayer" id="video4" style="display:">
<div class="video-playlist">
<a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br />
</div>
<div class="video-image">
<a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a>
</div>
</div>
</div>
</div>
<div class="prod-slider-container">
<div class="slider_header_text" id="1"><b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>
</div>
</div>
<!-- - END NAVIGATION ... -->
И вот CSS, который я использовал:
.page-container {
position: absolute;
width: 100%;
left: 0px;
}
.inner-container {
width: 100%;
margin: 0 auto;
text-align: center;
}
/* TOP MESSAGE */
.top-message-container {
position: relative;
width: 100%;
min-height: 360px;
//min-height: 655px;
background-color: #ff0000;
//background-image: url(images/core_header.jpg);
background-position: center bottom;
background-repeat: repeat-x;
overflow: hidden;
}
.topHeroImage {
position: relative;
//display: inline-block;
margin: 0 auto;
margin-top: 95px;
//margin-left: -350px;}
.header_intro_text
{
width: 700px;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 40px;
font-family: sans-serif;
color: white;
//line-height: 24px;
font-size: 30px;
letter-spacing: 1px;
}
/* VIEW STATUS ... */
.navigation-container {
width: 100%;
min-height: 610px;
background-color: #e70000;
display: inline-block;
letter-spacing: 1px;
}
.navigation-container a
{
color: #ffffff;
padding-left: 50px;
padding-right: 50px;
}
.navigation-container .inner-container {
color: #58595b;
min-height: 50px;
padding-top: 20px;
padding-bottom: 20px;
}
.main-video-container
{
width: 100%;
min-height: 611px;
//background-image: url(images/core_header.jpg);
background: #ffffff;
position: relative;
overflow-x: hidden;
}
.fret_vids
{
text-align: center;
position: absolute;
//background-color: #000000;
//height: 610px;
display: inline-block;
width:100%;}
.fret_vids_2
{
text-align: center;
position: absolute;
//background-color: #000000;
//height: 610px;
margin-top: 305px;
display: inline-block;
width:100%;
}
.fret_vids img
{
margin-left: -27px;
}
.fret_vids_2 img
{
margin-left: -27px;
}
.perc_vids
{
text-align: center;
left: 100%;
position: absolute;
//background-color: red;
//height: 610px;
display: inline-block;
width:100%;
}
.orch_vids
{
text-align: center;
left: 200%;
position: absolute;
//background-color: purple;
//height: 610px;
display: inline-block;
width:100%;
}
.wood_vids
{
text-align: center;
left: 300%;
position: absolute;
//color: white;
//height: 610px;
display: inline-block;
width:100%;
}
/* VIDEO SECTION ...
.detailed-reports-container
{
display: ;
width: 100%;
min-height: 674px;
background-color: #000000;
background-position: center bottom;
background-repeat: repeat-x;
text-align: center;
}
.detailed-reports-container .inner-container {
width: 970px;
}
*/
/* PRODUCT SECTION */
.prod-slider-container {
width: 100%;
min-height: 216px;
background-color: #ffffff;
background-position: center top;
background-repeat: repeat-x;
text-align: center;
}
.slider_header_text
{
font-family: sans-serif;
padding-top: 15px;
color: #58595b;
line-height: 24px;
font-size: 15px;
letter-spacing: 1px;
}
/*video*/
.videoPlayer {
position: relative;
width: 970px;
height: 476px; }
.video-playlist {
position: absolute;
top: 285px;
left: 15px;
}
.video-image {
position: absolute;
top: 42px;
left: 408px;
}
/*video*/
Комментарии:
1. Здесь нужно просмотреть много кода. Не могли бы вы обрезать его только до соответствующего кода? Или, что еще лучше, не могли бы вы создать CodePen или JSFiddle с этим кодом, чтобы мы могли видеть его вживую?
2. Кроме того, не могли бы вы уточнить, что не работает?
3. нет проблем, соберу что-нибудь вместе.
4. @RobertAKARobin это работает? : codepen.io/anon/pen/yaEGmp
5. Не беспокойтесь о том, что вы новичок! Тем не менее, StackOverflow — отличный ресурс, когда вы получаете ошибку и не знаете, как ее решить, но менее полезен, когда вы не уверены, с чего начать. Я бы рекомендовал поискать в Google «библиотеку карусели навигации», чтобы вам не пришлось заново изобретать колесо. Это выглядит аккуратно: kenwheeler.github.io/slick
Ответ №1:
Проблема в том, что у вас есть несколько вещей с
idof"carousel". Идентификатор подобен номеру социального страхования или отпечатку пальца: он уникален. У вас должен быть только один элемент с заданным идентификатором. Если вы обнаружите, что используете много идентификаторов, попробуйтеclassвместо a .
Проблема в том, что у вас есть несколько вещей с id of "carousel" . Идентификатор подобен номеру социального страхования или отпечатку пальца: он уникален. У вас должен быть только один элемент с заданным идентификатором.
Если вы обнаружите, что используете много идентификаторов, попробуйте class вместо a . Вы выбираете их в jQuery с . помощью, так же, как в CSS.
Например, чтобы превратить все с class помощью «mycarousel» в карусель:
<div id="foo" class="mycarousel"></div>
<div id="bar" class="mycarousel some-optional-other-class"></div>
<script>
$(".mycarousel").jcarousel("...")
</script>
Комментарии:
1. Спасибо вам ооочень большое! я только что исправил это, и все работает! Теперь мне просто нужно стилизовать все, чтобы это выглядело красиво! вы оказали огромную помощь и спасли жизнь!