首頁
Latest images
會員註冊
登入
Graciela54- 文章數 : 1
積分 : 3
注冊日期 : 2020-08-17
I don't know how to put images.
Please explain to me.
I will put 5 pictures in 'Image' folder which is in 'gallery' folder.
Thanks in advance!
Implement a simple Image gallery using Aja and JQuery.
Features:
Your page should be able to display the pictures that are specified in the file. The file contains the
names of the jpg files in order that they need to be displayed. With each file name there is the
information about how long a picture should be visible if the user does not click on “Previous” or
“Next” button. When the last picture is displayed it is followed by the first picture on the list. The
previous picture for the first picture is the last picture, and the next picture for the last picture is
the first picture
If the user clicks Previous or Next button, it immediately shows the previous or the next picture in
the list.
User can use an Update button to load and update the picture list from the file, and show the first
picture in the list.
Guidelines:
All pictures in the list can be found in the same folder of your choice.
The list is loaded from the file using AJAX and the java script (not JQuery).
Use JQuery anywhere where you can.
Use animation to transition between two pictures. At minimum you must use fade in and out.
Create a nav bar called Gallery on your website, link your assignment 6 to the gallery nav bar
Please explain to me.
I will put 5 pictures in 'Image' folder which is in 'gallery' folder.
Thanks in advance!
Implement a simple Image gallery using Aja and JQuery.
Features:
Your page should be able to display the pictures that are specified in the file. The file contains the
names of the jpg files in order that they need to be displayed. With each file name there is the
information about how long a picture should be visible if the user does not click on “Previous” or
“Next” button. When the last picture is displayed it is followed by the first picture on the list. The
previous picture for the first picture is the last picture, and the next picture for the last picture is
the first picture
If the user clicks Previous or Next button, it immediately shows the previous or the next picture in
the list.
User can use an Update button to load and update the picture list from the file, and show the first
picture in the list.
Guidelines:
All pictures in the list can be found in the same folder of your choice.
The list is loaded from the file using AJAX and the java script (not JQuery).
Use JQuery anywhere where you can.
Use animation to transition between two pictures. At minimum you must use fade in and out.
Create a nav bar called Gallery on your website, link your assignment 6 to the gallery nav bar
- Vibhav G.Contributor
- 文章數 : 12
積分 : 12
注冊日期 : 2020-05-01
- 代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="carousel-container">
<!-- Images folder should be in the same level as that of index.html -->
<div class="mySlides fade">
<img src="images/pic1.png" style="width:100%">
<div class="text">Pic 1 </div>
</div>
<div class="mySlides fade">
<img src="images/pic2.png" style="width:100%">
<div class="text">Pic 2 </div>
</div>
<div class="mySlides fade">
<img src="images/pic3.png" style="width:100%">
<div class="text">Pic 3 </div>
</div>
<div class="mySlides fade">
<img src="images/pic4.png" style="width:100%">
<div class="text">Pic 4 </div>
</div>
<div class="mySlides fade">
<img src="images/pic5.png" style="width:100%">
<div class="text">Pic 5 </div>
</div>
<a class="prev" onclick="changeImage(-1)">Prev</a>
<a class="next" onclick="changeImage(1)">Next</a>
</div>
<br>
<!-- External javascript file -->
<script src="index.js" charset="UTF-8"></script>
</body>
</html>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Carousel container */
.carousel-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
color: white;
font-size: 18px;
user-select: none;
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 18;
-moz-border-radius: 18;
border-radius: 18px;
font-family: Arial;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover */
.prev:hover, .next:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.active{
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
var imgIndex = 1;
var timer = null;
showImg(imgIndex);
function changeImage(n) {
clearTimeout(timer);
showImg(imgIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showImg(imgIndex = n);
}
function showImg(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n==undefined){n = ++imgIndex}
if (n > slides.length) {imgIndex = 1}
if (n < 1) {imgIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[imgIndex-1].style.display = "block";
// Image changes automatically in 5 seconds
timer = setTimeout(showImg, 5000);
}
這個論壇的權限：
您 無法 在這個版面回復文章