rosh
/
Project1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

changes in files1

master
rosh 4 years ago
parent
e374f28151
commit
b6b7c37fcc
3 changed files with 43 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      index.html
  2. 4
      myScript1.js
  3. 44
      mystyle.css

34
index.html
View File

@ -1,19 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery-3.5.1.js"></script>
<script src="myScript1.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css"> <link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myScript1.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<div id="black">BLUE</div> <div id="black">BLUE</div>
<div id="white">CUBE</div> <div id="white">CUBE</div>
<div id="CG">Casa Grande</div> <div id="CG">Casa Grande</div>
@ -23,15 +22,14 @@
<a href="#" class="previous round">&#8249;</a> <a href="#" class="previous round">&#8249;</a>
<a href="#" class="next round">&#8250;</a> <a href="#" class="next round">&#8250;</a>
<div id="slider"> <div id="slider">
<figure> <figure>
<img src="../Project/buildings/buildings/1.png" alt=""> <img src="../Project/buildings/buildings/1.png" alt="building">
<img src="../Project/buildings/buildings/2.png" alt=""> <img src="../Project/buildings/buildings/2.png" alt="building">
<img src="../Project/buildings/buildings/3.png" alt=""> <img src="../Project/buildings/buildings/3.png" alt="building">
<img src="../Project/buildings/buildings/4.png" alt=""> <img src="../Project/buildings/buildings/4.png" alt="building">
<img src="../Project/buildings/buildings/5.png" alt=""> <img src="../Project/buildings/buildings/5.png" alt="building">
</figure> </figure>
</div> </div>
</body> </body>
</html> </html>

4
myScript1.js
View File

@ -1,4 +1,3 @@
window.onload=function() { window.onload=function() {
var element = document.getElementById("myBar"); var element = document.getElementById("myBar");
var width = 1; var width = 1;
@ -11,6 +10,5 @@ window.onload=function() {
element.style.width = width + '%'; element.style.width = width + '%';
} }
} }
} }

44
mystyle.css
View File

@ -1,30 +1,38 @@
#slider { #slider {
overflow: hidden; overflow: hidden;
} }
#slider figure { #slider figure {
align-items: center; align-items: center;
position: relative; position: absolute;
animation: slider 5s linear 1s infinite; width: 300%;
margin: 0;
left: 0;
animation: slider 5s linear 1s infinite;
} }
@keyframes slider {
0% {
left:0;
}
25% { #slider figure img {
left: -25%; float: left;
} }
75% { @keyframes slider {
left: -50%; 0% {
} left:0;
100% { }
left: -75%;
} 25% {
} left: -25%;
}
75% {
left: -50%;
}
100% {
left: -75%;
}
}
#black { #black {

Write Preview
Loading…
Cancel
Save