In this lab, I implemented/fixed simple cycle slideshows on a pre-built webpage via a zip file. First, I downloaded the zip file and opened it up. Secondly, I linked all the CSS and JavaScript files onto the HTML file with <script> and <link> tags in the <head> and <body> tags. After that, I typed in id="subContent1" class="subColumn" data-cycle-fx="carousel" data-cycle-carousel-vertical="true" inside the bottom-left div containing images of a t-shirt, people in line, and alcoholic beverages. The images themselves have <img> tags with alt attributes that I added. Next, I typed id="subContent2" class="subColumn" into the bottom middle <div> containing text. Afterwords, I typed in id="subContent3" class="subColumn" for the bottom right <div> which contained images of music ads. Images have <img> tags with the alt attribute added in by me. Lastly, I typed in the javascript to make the slideshow function as intended inside <script> tags with:
$(document).ready(function(){
$('#subContent1').cycle({
fx: 'scrollVert',
speed: 200,
timeout: 5000,
delay:3000
});
$('#subContent2').cycle({
fx: 'scrollHorz',
speed: 200,
timeout: 5000,
delay:3000,
rev: true,
slides: "> div"
});
$('#subContent3').cycle({
fx: 'fade',
speed: 200,
timeout: 5000,
delay:3000
});
});
This JavaScript code cycles through the images of the bottom left div vertically, cycles horizontally through the texts of the bottom middle div, and cycles through the images of the bottom right div by fading the images away to the next one. Slideshows are useful to web designers because it grants the web designers access to more tools in their arsenal to build and improve their website.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_10/
No comments:
Post a Comment