I am new to learning JavaScript and I could really use some help. My boss insisted on a carousel for his homepage, so I watched a YouTube video on how to create one with JavaScript. There are a few things I want to change, however and I can't figure it out.
I pasted my code below. I really want it so that if the user HOVERS over the carousel it begins to twirl, not on the page load. How can I fix this?
Another question is when I put it on the page, it keep bleeding over the container. Is there a way I can fix this in the JS code?
I really appreciate the help. I did try to fox this myself before the post but I am too new to this to figure it out and I am really stuck.
var pictures = new Array('ANGELIQUE.jpg','AVANTI.jpg','CHALET.jpg','Chloe.jpg','Danube.jpg','Gallery.jpg','METROPOLIS.jpg','Ovation.jpg','PANACHE.jpg','Sentiments.jpg','Sorbet.jpg','St. Laurent.jpg','VeineDor.jpg','XVI.jpg');
var functions = new Array ('func1()','func2()','func3()','func4()','func5()','func6()','func7()','func8()','func9()','func10()','func11()','func12()','func13()','func14()');
var items = pictures.length;
var angles = new Array(items);
var images = new Array(items);
var rx = 250;
var ry = 10;
var cx = 0;
var cy = 0;
function itemSize()
{
for(var i = 0; i < items; i++)
{
images[i] = new Image();
images[i].src = pictures[i];
}
initCar();
}
function initCar()
{
var content = document.getElementById('content');
for(var i = 0; i < items; i++)
{
/*360 / 14 = 25 Math.PI * 2 <*> 360 ((Math.PI * 2) / items) * i
25 * i =
25 * 0 = 0
25 * 1 = 25
25 * 2 = 50
25 * 3 = 75
25 * 4 = 100
25 * 5 = 125
25 * 6 = 150
25 * 7 = 175
25 * 8 = 200
25 * 9 = 225
25 * 10 = 250
25 * 11 = 275
25 * 12 = 300
25 * 13 = 325
25 * 14 = 350
*/
angles[i] = ((Math.PI * 2) / items) * i;
var xpos = Math.cos(angles[i]) * rx;
var ypos = Math.sin(angles[i]) * ry;
var obj = newObj(i, xpos, ypos, parseInt(ypos), pictures[i]);
content.innerHTML += obj;
}
mouseOver('rotateCar()' , 18);
}
function rotateCar()
{
for(var i = 0; i < items; i++)
{
angles[i] += 0.008; //radians
var xpos = Math.cos(angles[i]) * rx;
var ypos = Math.sin(angles[i]) * ry;
var obj = document.getElementById('obj' + i);
obj.style.left = xpos + 'px';
obj.style.top = ypos + 'px';
obj.style.zIndex = parseInt(ypos);
var objImg = document.getElementById('img' + i);
var delta = (ypos - cy + ry) / (2 * ry);
delta = (delta + 1) / 2;
objImg.style.height = (delta * images[i].height) + 'px';
objImg.style.width = (delta * images[i].width) + 'px';
/*
yposBottomOne = cy + ry (cy + ry - cy + ry) / (2 * ry) = 2ry / 2ry = 1
yposTopOne = cy - ry (cy + ry - cy + ry) / (2 * ry) = 0 / 2ry = 0
*/
}
}
function newObj(id, x, y, z, src)
{
return '<div id="obj' + id + '"onclick="clickItem(' + id + ')" style="position: absolute; left:' + x + '; top:' + y + '; z-index:' + z + '; width:100px;"><img id="img' + id + '" src="' + src + '"/></div>';
}
function clickItem (id)
{
eval (functions[id]);
}
function func1()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Angelique&RabbetDepths=&CatalogPage=&CatalogName='
}
function func2()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Avanti&RabbetDepths=&CatalogPage=&CatalogName='
}
function func3()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Chalet&RabbetDepths=&CatalogPage=&CatalogName='
}
function func4()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Chloe&RabbetDepths=&CatalogPage=&CatalogName='
}
function func5()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Danube&RabbetDepths=&CatalogPage=&CatalogName='
}
function func6()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Gallery&RabbetDepths=&CatalogPage=&CatalogName='
}
function func7()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Metropolis&RabbetDepths=&CatalogPage=&CatalogName='
}
function func8()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Ovation&RabbetDepths=&CatalogPage=&CatalogName='
}
function func9()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Panache&RabbetDepths=&CatalogPage=&CatalogName='
}
function func10()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Sentiments&RabbetDepths=&CatalogPage=&CatalogName='
}
function func11()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Sorbet&RabbetDepths=&CatalogPage=&CatalogName='
}
function func12()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=St.%20Laurent&RabbetDepths=&CatalogPage=&CatalogName='
}
function func13()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=Veine%20D%27Or&RabbetDepths=&CatalogPage=&CatalogName='
}
function func14()
{
window.location='https://www.omegamoulding.com/ProductList.aspx?ItemNumber=&Finishes=&Styles=&MinWidth=0.37500&MaxWidth=6.00000&FrameTypes=&Collections=XVI&RabbetDepths=&CatalogPage=&CatalogName='
}
