|
07.08.2015, 14:18
#39025048
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Слайд-шоу</title>
<SCRIPT Language="Javascript">
function printit()
{
window.print();
}
</script>
<style>
@media print
{
*{
color:#0000 !important;
background-transparent: !important;
}
html{
font-family: "Times New Roman", Times, serif;
}
body{
padding-left: 1%; padding-right: 1%;
}
#bt_Ctr{
display:none;
}
#show button
{
display:none;
}
img {
width: 100%;
height: 100%;
}
#view {
width: 100%;
height: 100%;
}
}
*{margin:0;padding:0}
#show{display:none;margin-top:1em;}
body{width:400px;margin:100px auto 0}
.view
{
width:inherit;
height:200px;
overflow:scroll
}
.view ul
{
list-style:none;
width:10000px;
}
.view li{float:left}
#show button
{
padding:1em;
margin-right:1em;
cursor:pointer
}
</style>
</head>
<body>
<div class='view'>
<ul>
<li><img src='img/ettlingen01.jpg'></li>
<li><img src='img/kremlin01.jpg'></li>
<li><img src='img/kremlin02.jpg'></li>
<li><img src='img/kremlin03.jpg'></li>
</ul>
</div>
<div id='show'>
<button id='prev'>Назад</button>
<button id='next'>Вперед</button>
</div>
<script src="jquery.js" type="text/javascript"></script>
<script src="slide-show.js"></script>
</br></br></br></br>
<div id="bt_Ctr" style='margin-left:25%;'>
<form>
<input TYPE="button" CLASS="for" VALUE="Распечатать страницу!" onClick="printit()">
</form>
</div>
</body>
</html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
(function($){
var viewUL=$('div.view').css('overflow','hidden').children('ul');
imgs=viewUL.find('img'),
imgW=imgs[0].width,
imgsLen=imgs.length,
totalImgsW=imgW*imgsLen,
current=1;
$('#show').show().find('button').on('click',
function(){
//console.log($(this));
var direction=$(this).attr('id');
//console.log(direction);
var position=imgW;
(direction === 'next') ? ++current : --current;
if(current === 0)
{
current=imgsLen;
direction='next';
position=totalImgsW-imgW;
}
else if(current-1===imgsLen)
{
current=1;
position=0;
}
doit(viewUL,position,direction);
});
function doit(container,position,direction)
{
var sign;
if(direction && position !==0)
{
sign=(direction === 'next') ? '-=' : '+=';
}
container.animate({
'margin-left' : sign ? (sign+position) : position
});
}
})(jQuery);
|
|
|
