Перейти к содержимому



Не получается вставить слайдер в content

#1 kazyavka

kazyavka
  • Пользователь
  • 9 сообщений
  • Репутация: 0
0

Отправлено 09 Июль 2013 - 22:41

это сам слайдер

<link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/tms-0.4.1.js"></script>
  <!-- demo -->
  <script type="text/javascript" src="js/demo.js"></script>
  <!-- end demo -->
  <script src="js/highlight.js"></script>
  <script src="js/html5.js"></script>
  <script src="js/html-xml.js"></script>
  <script src="js/css.js"></script>
  <script src="js/javascript.js"></script>

  <script>
	hljs.tabReplace = '	';
	hljs.initHighlightingOnLoad();
  </script>

  <!--[if lt IE 7]>
   <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">  
  <![endif]-->
  <!--[if lt IE 9]>
   <script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">  
  <![endif]-->
<div id="main">
	  <div id="slide">	
	   <!-- slider -->
	   <div class="slider">
		<ul class="items">
   <li><img src="images/slide-3.jpg" alt="" /><div class="banner"><span>VOILA</span></div></li>
   <li><img src="images/slide-4.jpg" alt="" /><div class="banner"><span>VOILA</span></div></li>
   <li><img src="images/slide-1.jpg" alt="" /><div class="banner"><span>VOILA </span></div></li>
   <li><img src="images/slide-2.jpg" alt="" /><div class="banner"><span>VOILA </span></div></li>
   <li><img src="images/slide-5.jpg" alt="" /><div class="banner"><span>VOILA</span></div></li>
   <li><img src="images/slide-6.jpg" alt="" /><div class="banner"><span>VOILA</span></div></li>
   <li><img src="images/slide-7.jpg" alt="" /><div class="banner"><span>VOILA </span></div></li>
		</ul>
	   </div>
	   <a href="#" class="prev">&lt;</a> <a href="#" class="play"><em>stop</em><span>play</span></a> <a href="#" class="next">&gt;</a>
	   <!-- slider end -->
	  </div>
</div>


надо поместить в content galery.html у меня видны только кнопки слайдера а картинок нет, думаю дело z-index


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galery</title>

<style type="text/css">
body {
margin: 0;
}
p {
margin: 0;
}
</style>
<link href="galery.css" rel="stylesheet" type="text/css"
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>Плавное увеличение картинки при наведении на jQuery</title>
	<!--Подключаем библиотеку jquery.min.js-->
  <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">//Простое увеличение картинки
  $(function(){
	$('.zoom2').hover(function(){
	  $(this).children('img').stop(true,true)
   .animate({width:"864px",height:"568px",right:"300px",top:"-30px"}, 800);
	},
  function(){
   $(this).children('img').stop(true,true)
  .animate({left:"0",top:"0",width:"216px",height:"142px"}, 800);
  });
  });
  </script>
	<style>
div.zoom2 { width:432px; height:284px; position:relative; margin:0; left:0; right:0; }
div.zoom2 img { position:relative; cursor:pointer; left:0; top:0; width:216px; height:142px; }
div.zoom2:hover { overflow:visible; visibility:hidden; }
div.zoom2:hover img { visibility:visible; position:absolute; z-index:150; left:0; right:0; }
#container #footer p font {
}
	#footer p font {
text-align: right;
}
	#container #footer p font {
font-weight: bold;
}
	#center {
text-align: center;
}
	</style>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.limp').each(function(){ // В данной строке limp - название класса для создания прозрачности.
	  $(this).animate({opacity:'1.0'},1); // В данной строке задаётся начальная прозрачность элемента.
	  $(this).mouseover(function(){
		  $(this).stop().animate({opacity:'0.3'},600); // В данной строке задаётся прозрачность элемента при наведении курсора.
	  });
	  $(this).mouseout(function(){
		  $(this).stop().animate({opacity:'1.0'},300); // В данной строке задаётся прозрачность элемента при уходе курсора с элемента.
	  });
});
});
</script>

											 <!--- изменение картинки при наведении курсора --->
<script language="javascript">
<!--
function ChangeImg() {
if(document.images) {
eval("document."+ChangeImg.arguments[0]+
".src=('"+ChangeImg.arguments[1]+"')");
}
}
function preload() {
if (document.images) {
var imgsrc = preload.arguments;
arr=new Array(imgsrc.length);
for (var j=0; j<imgsrc.length; j++) {
arr[j] = new Image;
arr[j].src = imgsrc[j];
}
}
}
//--></script>
	 </HEAD>
	
	
	
	  <p>	
<body>
	 <div id="container">		
					<div id="header">
<a HREF="voila.html" title="Главная Voila "><img src="menu/voila studio 1.png" align="left" class="limp"></a>	 <!--- Ссылка на главную стр --->
<script language="JavaScript" type="text/javascript">  /*слайдер*/
all_images = new Array (
"image/001.jpg",
"image/006.jpg",
"image/022.jpg");
var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 2500;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
  ImgNum = ImgNum + direction;
  if (ImgNum > ImgLength) { ImgNum = 0; }
  if (ImgNum < 0) { ImgNum = ImgLength; }
  document.slide_show.src = all_images[ImgNum];
}
}
function auto() {
if (lock == true) {
  lock = false;
  window.clearInterval(run);
}
else if (lock == false) {
  lock = true;
  run = setInterval("chgImg(1)", delay);
}
}
</script>
<div align="bottom">

  <tr align="center">
   <td colspan="3"><img src="новая папка/001.jpg" name="slide_show"></td>
  </tr>

</div>
<script language="JavaScript" type="text/javascript">  /*конец слайдера*/
auto();

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Voila</title>
<body>
<div>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> горизонтальное выпадаюшое меню</title>
  
	<style type="text/css">	   /*меню*/
		.nav, .nav ul
			{
				list-style:none;
				margin:0;
				padding:0;
				font:15px/30px Verdana, Arial, Helvetica, sans-serif;
				background-color: #bc10ad;
			}
		.nav
		  
			{
				height:30px; /*высота меню*/
				border:0px solid #FF1493;
			}
		.nav li
			{
				float:left; /*выравнивание текста меню*/
				position:relative;
			}
		.nav li:hover
			{
				background-color:#coc; /*цвет  выделения*/
			}
		.nav ul
			{
	  opacity: 0.9; /* Значение прозрачности */
	filter: alpha(Opacity=70); /* Прозрачность в IE */
				position:absolute;  /*всплывающая	 часть*/
				left:1px;
				top:30px;
				border:1px solid #coc;
				border-bottom:0;
				border-top:0;
				display:none;
			}
		.nav li:hover ul
			{
				display:block;
			}
		.nav ul a
			{
				border:0;
				border-bottom:1px solid #coc;
			}
		.nav a
			{
				display:block;
				width:115px;
				padding:0 20px;
				color:#FFFFFF;
				text-decoration:none;
				border-right:1px solid #coc;
				text-align:center;
			}
		.nav a:hover
			{
				color:#FFF;
				background-color:#ff1394;
			}
  
	</style>

<body>
	<ul class="nav">
	  
		<li><a href="#">БРЕНДЫ</a>
			<ul>
				<li><a href="#">WELLA</a></li>
				<li><a href="#">NIOXIN</a></li>
				<li><a href="#">LeBeL</a></li>
				<li><a href="#">SP</a></li>
				<li><a href="#">CODECOLOR</a></li>
			</ul>
			</li>
		<li><a href="#">УСЛУГИ</a>
			<ul>
				<li><a href="#">ВОЛОСЫ</a></li>
				<li><a href="#">ЛИЦО</a></li>
				<li><a href="#">ТЕЛО</a></li>
				 <li><a href="#">РУКИ</a></li>
				  <li><a href="#">НОГИ</a></li>
			
			</ul>
			</li>
		<li><a href="#">МУЖЧИНЫ</a>
		 <ul>
				<li><a href="#">БРЕНДЫ</a></li>
				<li><a href="#">УХОД ЗА ВОЛОСАМИ</a></li>
	  
			</ul>
			</li>
		<li><a href="#">ПРАЙС-ЛИСТ</a>
	  
			</li>
		<li><a href="#">ВАКАНСИИ</a>
		
		 </li>
		<li><a href="пресса о нас.html">ПРЕССА О НАС</a>
		
		 <li><a href="#">О САЛОНЕ</a>
				  <ul>
			
				<li><a href="#">МАСТЕРА</a></li>
				<li><a href="#">ГАЛЕРЕЯ</a></li>
			   </ul>
		</li>	
	  
		</li>
		<li><a href="#">КОНТАКТЫ</a>
	  
			</li>
	  
	   </ul>
	</div>
  
</div>
<div id="sidebar">	<br>	<br> <br> <br> <br>
   <a href="wella.com" target="_blank" title="Официальный сайт Wella"><img src="baner/wella.png"width="216" height="71"  class="limp"> </a>
	<br><br>
<a href="nioxin.com" target="_blank" title="Официальный сайт NioxiN"><img src="baner/nioxin.png"width="216" height="71"   class="limp"> </a>
	<br><br>
   <a href="lebel.ru" target="_blank" title="Официальный сайт LebeL"><img src="baner/lebel.png"width="216" height="71"   class="limp" > </a>
	<br>  <br>
<a href="lebel.ru" target="_blank" title="Официальный сайт"><img src="baner/sp.png"width="216" height="71"  class="limp" > </a>
<br>  <br>
<a href="lebel.ru" target="_blank" title="Официальный сайт"><img src="baner/codecolor.png"width="216" height="71"  class="limp" > </a>
   <br>  <br>
<a href="lebel.ru" target="_blank" title="Официальный сайт"><img src="baner/sp.png"width="216" height="71"  class="limp" > </a>
<br>
</div>
<div id="blok">  <br>  <br>  <br>  <br>  <br>
			   <a href="wella.com" target="_blank" title="Официальный сайт Wella"><img src="baner/wella.jpg"width="216" height="71"  class="limp"> </a>
	<br><br>
<a href="nioxin.com" target="_blank" title="Официальный сайт NioxiN"><img src="baner/nioxin.jpg"width="216" height="71"   class="limp"> </a>
	<br><br>
   <a href="lebel.ru" target="_blank" title="Официальный сайт LebeL"><img src="baner/lebel.jpg"width="216" height="71"   class="limp" > </a>
	<br>  <br>
<a href="lebel.ru" target="_blank" title="Официальный сайт"><img src="baner/lebel2.jpg"width="216" height="71"  class="limp" > </a>
<br>  <br>
<a href="lebel.ru" target="_blank" title="Официальный сайт"><img src="baner/codecolor.png"width="216" height="71"  class="limp" > </a>
   <br>  <br>
<a href="lebel.ru" target="_blank" title="Официальный сайт"><img src="baner/sp.png"width="216" height="71"  class="limp" > </a>
<br>
				 </div>
				
[color=#ff0000]<div id="content"> [/color]
[color=#ff0000]  
</div>	 [/color]

<div id="clear">
</div>
<div id="footer">
  
<p><br><br><font color="#FFF" font size="3">&nbsp;&nbsp;&nbsp;&nbsp;2013г. Богданова Дарья <br></font></p>
	 </div>
	</div>
</body>
</p>
</html>


css слайдера

#main {
min-height:100%;
margin: 0 auto;
position: relative;
width: 650px;
font-size:.8125em;
}

ul {
list-style-type:square;
list-style-position:outside;
margin:0 0 1.5em 1.5em;
}
#slide { height:600px; width:900px; position:relative; overflow:hidden; z-index:2}
.slider {
width:650px;
margin:0 auto;
position:relative;
z-index:2
}
.items {
display:none;
}
.pagination {
  position:absolute;
  top:351px;
  left:169px;
  display:inline-block;
  height:20px;
  width:140px;
  border:1px solid #000;
  background:url(../images/pagination-bg.gif) left top repeat-x;
  border-radius:15px;
  -moz-border-radius:15px;
  -webkit-border-radius:15px;
  padding:5px 0 0 20px;
  z-index:60;
}
.pagination li {
  float:left;
  padding:0 3px 0 0;
  font-size:0;
  line-height:0;
  margin:0;
  color:#252525;
  background:none !important;
}
  .pagination a {
   display:block;
   width:15px;
   height:15px;
   background:url(../images/pagination-a-bg.gif) left 0px no-repeat;
   font-size:0;
   line-height:0;
   text-decoration:none;
  }
   .pagination li.current a {
	background:url(../images/pagination-a-active.gif) left 0px no-repeat;
   }
.prev {
display:block;
width:25px;
height:22px;
background:url(../images/pagination-bg.gif) left top repeat-x;
position:absolute;
z-index:15;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
top:352px;
left:259px;
padding:2px 0 0 0;
font-weight:bold;
text-align:center;
color:#fff;
text-decoration:none;
}
.prev:hover {
  color:#999
}
.next {
display:block;
width:25px;
height:22px;
background:url(../images/pagination-bg.gif) left top repeat-x;
position:absolute;
z-index:15;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
top:352px;
left:510px;
padding:2px 0 0 0;
font-weight:bold;
text-align:center;
color:#fff;
text-decoration:none;
}
.next:hover {
  color:#999
}

.play {
display:block;
width:45px;
height:22px;
background:url(../images/pagination-bg.gif) left top repeat-x;
position:absolute;
z-index:15;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
top:352px;
left:623px;
padding:2px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
.play span {
  display:none;
}
.play em {
  font-style:normal;
  display:block;
}
.paused span {
display:block;
}
.paused em {
display:none;
}
.banner{
width:260px;
overflow:hidden;
position:absolute;
top:200px;
color:#fff;
right:0px;
z-index:15;
background:url(../images/png.png) left top repeat;
padding:0px;
border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
}
.banner span {
  display:block;
  padding:20px;
}
.progbar {
background:#000;
width:100%;
height:2px;
position:absolute;
top:0px;
left:0px;
z-index:999;
}
.numStatus {
display:block;
width:45px;
height:22px;
background:url(../images/pagination-bg.gif) left top repeat-x;
position:absolute;
z-index:15;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
top:551px;
left:583px;
padding:2px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
/*-------- end slider -----------*/
.col-1 {
float:left;
width:400px;
padding-right:50px
}
* + html .min {
min-height:45px;
}
.col-2 {
float:left;
width:400px;
}


css galery

body {

			 width: 1330px;
   hight:1451 px;
			font-family: Trebuchet MS, Arial, Times New Roman;
			font-size: 12px;
   z-index:0;
}

#container {
	  
			background: #FFF; /*цвет контейнера макета*/
   margin: 0px 40px 0 40px;
		  
			width: 1245px;
   hight:1051 px;
		  
}
#header{
width: 1245px;
height: 401px;
background-color:#FFF; /*желтый*/
position: relative; z-index:10;
}
#blok {
margin:  20px 0 0 0;
background-image: url(menu/new.png);/*голубой*/
background-repeat:no-repeat;
z-index:10;
float:left;
width:216px;
hight:660px;
}

#content{
width:790px;
hight:690px;
margin: 20px 10px 0 230px;
float: top;
background-image: url(menu/chika2.png);
background-repeat:no-repeat;
z-index:5;
}
#sidebar{
margin:  20px 0 0 0;
float:right;
width:216px;
hight:650px;
background-image: url(menu/partner.png);
background-repeat: no-repeat;
z-index:9;
}
#clear {
clear:both;
}
#footer{
background-image:url(menu/podval.png);
height: 100px;
width: 1245px;
z-index:8;
}

Прикрепленные файлы

  • Прикрепленный файл  galery.html   10,43К   Количество загрузок: 100

 

 

  • 0

#2 kazyavka

kazyavka
    Topic Starter
  • Пользователь
  • 9 сообщений
  • Репутация: 0

Отправлено 13 Июль 2013 - 11:32

нашла решение поместила в iframe
  • 0


Оформление форума – IPBSkins.ru