Ict1512 assignment 12 hands on project solution
With JavaScript code and html and css
############################### results image #######################
##########################html code #################
<!DOCTYPE html>
<html lang="en">
<head>
<!--
JavaScript 7th Edition
Chapter 12
Project 12-4
Project to display a slideshow with jQuery effects
Author:
Date:
Filename: project12-04.html
-->
, <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-
/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-
eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<title>Hands-on Project 12-4</title>
<link rel="stylesheet" href="styles.css" />
<script src="project12-04_txt.js" defer></script>
</head>
<body>
<header>
<h1>
Hands-on Project 12-4
</h1>
</header>
<section>
<h1>Interactive Slideshow</h1>
<div id="slidebox">
<img id="leftbutton" src="leftarrow.png" alt="left" />
<div id="slides">
<img src="photo01.jpg" class="slideImages" alt="Sky Pond (Rocky Mountain National Park)"
id="photo1" />
<img src="photo02.jpg" class="slideImages" alt="Buffalo on the Plains (South Dakota)"
id="photo2" />
<img src="photo03.jpg" class="slideImages" alt="Garden of the Gods (Colorado Springs)"
id="photo3" />
With JavaScript code and html and css
############################### results image #######################
##########################html code #################
<!DOCTYPE html>
<html lang="en">
<head>
<!--
JavaScript 7th Edition
Chapter 12
Project 12-4
Project to display a slideshow with jQuery effects
Author:
Date:
Filename: project12-04.html
-->
, <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-
/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-
eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<title>Hands-on Project 12-4</title>
<link rel="stylesheet" href="styles.css" />
<script src="project12-04_txt.js" defer></script>
</head>
<body>
<header>
<h1>
Hands-on Project 12-4
</h1>
</header>
<section>
<h1>Interactive Slideshow</h1>
<div id="slidebox">
<img id="leftbutton" src="leftarrow.png" alt="left" />
<div id="slides">
<img src="photo01.jpg" class="slideImages" alt="Sky Pond (Rocky Mountain National Park)"
id="photo1" />
<img src="photo02.jpg" class="slideImages" alt="Buffalo on the Plains (South Dakota)"
id="photo2" />
<img src="photo03.jpg" class="slideImages" alt="Garden of the Gods (Colorado Springs)"
id="photo3" />
