我的问题是我使用不同名称的相同 js 文件。两个文件的功能是一样的。第一个 js 文件正在滑动 5 张图像（黑白），而另一个 js 仅在同一页面的不同链接上滑动两张图像（彩色）。但两者都不能正常工作意味着如果一个用于黑白图像的滑块工作，那么另一个用于彩色图像的滑块不工作。请帮我。
Js在名为coverflow-color.js的脚本文件中被引用
var min = 1; //minimum number of image
var max = 3; //maximum number of images
var current = 2; //image number that is at the center of the coverflow
var currPos = 0; //custom attribute that stores current TranslateX position of each image
var newPos = 0; //custom attribute that stores new TranslateX position of each image, i.e after movement
var currAngle = 0; //custom attribute that stores current RotationY angle of each image
var newAngle = 0; //custom attribute that stores new RotationY angle of each image
var gap = 75;
var clickedIndex = 0; //index of the image tapped
var isMouseDown = false; //has the user interacted
var swipeStartX = 0;
var swipeDistanceX = 0;
var diff = 0;
var imageTapStartX = 0;
var imageTapEndX = 0;
var imageTapDistanceX= 0;
var coverFlowContainerElement = null;
var thresholdDistanceSingleSlide = 0; //this measures the distance
window.addEventListener("load",function(){
/* Hide the browser address bar. This will give a native feel to the app */
setTimeout(function() { window.scrollTo(0, 1); }, 20);
/* Get the pointer to the coverflow holder */
coverFlowContainerElement = document.getElementById("coverflow");
moveImagesFromRight(); //help comments are there in the function definition
addEventsToImageHolders(); //help comments are there in the function definition
addEventToCoverflowHolder(); //help comments are there in the function definition
thresholdDistanceSingleSlide = parseInt(300 / max);
disablePageScroll(); //help comments are there in the function definition
},false);
/*
Give the initial thrust to the slides from the right. I have just given it an effect of the images being
thrown into the center from the right.
*/
function moveImagesFromRight()
{
setTimeout(function() {
document.getElementById("fig1").style.webkitTransform = "translateX(-150px) rotateY(30deg)";
document.getElementById("fig2").style.webkitTransform = "translateX(0px) rotateY(0deg) translateZ(200px)";
document.getElementById("fig3").style.webkitTransform = "translateX(150px) rotateY(-30deg)";
}, 150);
}
/* Register touch event listener to the image holders i.e the <div> holding each images */
function addEventsToImageHolders()
{
var imageHolders = coverFlowContainerElement.getElementsByTagName("div");
for(var i=0;i<imageHolders.length;i++)
{
//console.log(imageHolders[i]);
imageHolders[i].addEventListener("touchstart",handleImageTapStart,false);
imageHolders[i].addEventListener("touchend",handleImageTapEnd,false);
}
}
/*
Add touch events to the <div id='coverflow' /> container. So the container registers the finger movements
and acts accordingly
*/
function addEventToCoverflowHolder()
{
coverFlowContainerElement.addEventListener("touchstart", handleFingerSwipeStart, false);
coverFlowContainerElement.addEventListener("touchmove", handleFingerSwipeMove, false);
coverFlowContainerElement.addEventListener("touchend", handleFingerSwipeEnd, false);
}
/* The default behavior of the browser is to scroll when you swipe. This line is to prevent scrolling */
function disablePageScroll() {
document.ontouchmove = function(event) {
event.preventDefault();
}
}
/* Events for the <div id='coverflow'></div> holder */
function handleFingerSwipeStart(event) {
isMouseDown = true;
swipeStartX = event.changedTouches[0].pageX;
event.preventDefault();
}
function handleFingerSwipeMove(event) {
if (isMouseDown) {
swipeDistanceX = parseInt(event.changedTouches[0].pageX - swipeStartX);//
var netDistance = Math.abs(swipeDistanceX);
//console.log("Move: " + swipeDistanceX + " Net distance: " + netDistance); //changedTouches[0].
if (netDistance >= thresholdDistanceSingleSlide) {
//console.log(thresholdDistanceSingleSlide + " covered");
if (swipeDistanceX < 0) {
right();
swipeStartX = event.changedTouches[0].pageX;
}
else {
left();
swipeStartX = event.changedTouches[0].pageX;
}
}
}
}
function handleFingerSwipeEnd(event) {
if (isMouseDown) {
isMouseDown = false;
swipeStartX = 0;
}
}
/*
Events for the <div id="fig"></div> elements where fig starts from 1 to 7. The images are
inside these element
*/
function handleImageTapStart(event) {
imageTapStartX = event.changedTouches[0].pageX;
}
function handleImageTapEnd(event) {
imageTapEndX = event.changedTouches[0].pageX;
imageTapDistanceX = imageTapEndX - imageTapStartX;
var targetObj = event.currentTarget;
if (imageTapDistanceX == 0) {
clickedIndex = parseInt(targetObj.id.slice(3, 4));
if (clickedIndex > current) {
//move right to the clicked index
diff = clickedIndex - current;
for (var i = 1; i <= diff; i++) {
right();
}
}
else if (clickedIndex < current) {
//move left to the clicked index
diff = (current - clickedIndex);
for (var i = 1; i <= diff; i++) {
left();
}
}
else {
//same element is clicked....do nothing
//alert(clickedIndex);
document.getElementById("coverflow").style.display="none";
document.getElementById("fig"+clickedIndex+"_content").style.display="block";
}
}
}
/* Functions - left() & right() for actually moving the images when user interacts*/
/* Move an image from L -> R i.e you are swiping from L->R across the screen */
function left() {
if (current > min) {
current--;
for (var i = 1; i <= max; i++) {
currPos = document.getElementById("fig" + i).getAttribute("cp");
currAngle = document.getElementById("fig" + i).getAttribute("a");
if (currPos == "-150" || currPos == "0") {
newPos = parseInt(currPos) + (gap * 2) * (1);
if (currPos == "0") {
newAngle = -30;
}
else if (currPos = "-150") {
newAngle = 0;
}
else {
}
}
else {
newPos = parseInt(currPos) + (gap) * (1);
newAngle = parseInt(currAngle);
}
if (i == current) {
document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg) translateZ(200px)";
}
else {
document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg)";
}
document.getElementById("fig" + i).setAttribute("cp", newPos);
document.getElementById("fig" + i).setAttribute("a", newAngle);
}
}
}
/* Move an image from R -> L i.e you are swiping from R->L across the screen */
function right() {
if (current < max) {
current++;
for (var i = 1; i <= max; i++) {
currPos = document.getElementById("fig" + i).getAttribute("cp");
currAngle = document.getElementById("fig" + i).getAttribute("a");
if (currPos == "150" || currPos == "0") {
newPos = parseInt(currPos) + (gap * 2) * (-1);
if (currPos == "0") {
newAngle = 30;
}
else if (currPos = "150") {
newAngle = 0;
}
else {
}
}
else {
newPos = parseInt(currPos) + (gap) * (-1);
newAngle = parseInt(currAngle);
}
if (i == current) {
document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg) translateZ(200px)";
}
else {
document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg)";
}
document.getElementById("fig" + i).setAttribute("cp", newPos);
document.getElementById("fig" + i).setAttribute("a", newAngle);
}
}
}
另一个Js在名为coverflow-type.js的脚本文件中引用
var min = 1; //minimum number of image
var max = 5; //maximum number of images
var current = 3; //image number that is at the center of the coverflow
var currPos = 0; //custom attribute that stores current TranslateX position of each image
var newPos = 0; //custom attribute that stores new TranslateX position of each image, i.e after movement
var currAngle = 0; //custom attribute that stores current RotationY angle of each image
var newAngle = 0; //custom attribute that stores new RotationY angle of each image
var gap = 75;
var clickedIndex = 0; //index of the image tapped
var isMouseDown = false; //has the user interacted
var swipeStartX = 0;
var swipeDistanceX = 0;
var diff = 0;
var imageTapStartX = 0;
var imageTapEndX = 0;
var imageTapDistanceX= 0;
var coverFlowContainerElement = null;
var thresholdDistanceSingleSlide = 0; //this measures the distance
window.addEventListener("load",function(){
/* Hide the browser address bar. This will give a native feel to the app */
setTimeout(function() { window.scrollTo(0, 1); }, 20);
/* Get the pointer to the coverflow holder */
coverFlowContainerElement = document.getElementById("coverflow");
moveImagesFromRight(); //help comments are there in the function definition
addEventsToImageHolders(); //help comments are there in the function definition
addEventToCoverflowHolder(); //help comments are there in the function definition
thresholdDistanceSingleSlide = parseInt(300 / max);
disablePageScroll(); //help comments are there in the function definition
},false);
/*
Give the initial thrust to the slides from the right. I have just given it an effect of the images being
thrown into the center from the right.
*/
function moveImagesFromRight()
{
setTimeout(function() {
document.getElementById("fig1").style.webkitTransform = "translateX(-225px) rotateY(30deg)";
document.getElementById("fig2").style.webkitTransform = "translateX(-150px) rotateY(30deg)";
document.getElementById("fig3").style.webkitTransform = "translateX(0px) rotateY(0deg) translateZ(200px)";
document.getElementById("fig4").style.webkitTransform = "translateX(150px) rotateY(-30deg)";
document.getElementById("fig5").style.webkitTransform = "translateX(225px) rotateY(-30deg)";
}, 150);
}
/* Register touch event listener to the image holders i.e the <div> holding each images */
function addEventsToImageHolders()
{
var imageHolders = coverFlowContainerElement.getElementsByTagName("div");
for(var i=0;i<imageHolders.length;i++)
{
//console.log(imageHolders[i]);
imageHolders[i].addEventListener("touchstart",handleImageTapStart,false);
imageHolders[i].addEventListener("touchend",handleImageTapEnd,false);
}
}
/*
Add touch events to the <div id='coverflow' /> container. So the container registers the finger movements
and acts accordingly
*/
function addEventToCoverflowHolder()
{
coverFlowContainerElement.addEventListener("touchstart", handleFingerSwipeStart, false);
coverFlowContainerElement.addEventListener("touchmove", handleFingerSwipeMove, false);
coverFlowContainerElement.addEventListener("touchend", handleFingerSwipeEnd, false);
}
/* The default behavior of the browser is to scroll when you swipe. This line is to prevent scrolling */
function disablePageScroll() {
document.ontouchmove = function(event) {
event.preventDefault();
}
}
/* Events for the <div id='coverflow'></div> holder */
function handleFingerSwipeStart(event) {
isMouseDown = true;
swipeStartX = event.changedTouches[0].pageX;
event.preventDefault();
}
function handleFingerSwipeMove(event) {
if (isMouseDown) {
swipeDistanceX = parseInt(event.changedTouches[0].pageX - swipeStartX);//
var netDistance = Math.abs(swipeDistanceX);
//console.log("Move: " + swipeDistanceX + " Net distance: " + netDistance); //changedTouches[0].
if (netDistance >= thresholdDistanceSingleSlide) {
//console.log(thresholdDistanceSingleSlide + " covered");
if (swipeDistanceX < 0) {
right();
swipeStartX = event.changedTouches[0].pageX;
}
else {
left();
swipeStartX = event.changedTouches[0].pageX;
}
}
}
}
function handleFingerSwipeEnd(event) {
if (isMouseDown) {
isMouseDown = false;
swipeStartX = 0;
}
}
/*
Events for the <div id="fig"></div> elements where fig starts from 1 to 7. The images are
inside these element
*/
function handleImageTapStart(event) {
imageTapStartX = event.changedTouches[0].pageX;
}
function handleImageTapEnd(event) {
imageTapEndX = event.changedTouches[0].pageX;
imageTapDistanceX = imageTapEndX - imageTapStartX;
var targetObj = event.currentTarget;
if (imageTapDistanceX == 0) {
clickedIndex = parseInt(targetObj.id.slice(3, 4));
if (clickedIndex > current) {
//move right to the clicked index
diff = clickedIndex - current;
for (var i = 1; i <= diff; i++) {
right();
}
}
else if (clickedIndex < current) {
//move left to the clicked index
diff = (current - clickedIndex);
for (var i = 1; i <= diff; i++) {
left();
}
}
else {
//same element is clicked....do nothing
// alert(clickedIndex);
console.log(targetObj);
var thumbfile=targetObj.getAttribute("rel");
document.getElementById("coverflow").style.display="none";
document.getElementById("content").style.display="block";
var thumbList=show(thumbfile);
document.getElementById("Tlist").innerHTML=thumbList;
window.mySwipe = new Swipe(document.getElementById('slider'),{
callback: function(e, pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = '';
}
bullets[pos].className = 'on';
}
}),
bullets = document.getElementById('position').getElementsByTagName('span');
}
}
}
/* Functions - left() & right() for actually moving the images when user interacts*/
/* Move an image from L -> R i.e you are swiping from L->R across the screen */
function left() {
if (current > min) {
current--;
for (var i = 1; i <= max; i++) {
currPos = document.getElementById("fig" + i).getAttribute("cp");
currAngle = document.getElementById("fig" + i).getAttribute("a");
if (currPos == "-150" || currPos == "0") {
newPos = parseInt(currPos) + (gap * 2) * (1);
if (currPos == "0") {
newAngle = -30;
}
else if (currPos = "-150") {
newAngle = 0;
}
else {
}
}
else {
newPos = parseInt(currPos) + (gap) * (1);
newAngle = parseInt(currAngle);
}
if (i == current) {
document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg) translateZ(200px)";
}
else {
document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg)";
}
document.getElementById("fig" + i).setAttribute("cp", newPos);
document.getElementById("fig" + i).setAttribute("a", newAngle);
}
}
}
/* Move an image from R -> L i.e you are swiping from R->L across the screen */
function right() {
if (current < max) {
current++;
for (var i = 1; i <= max; i++) {
currPos = document.getElementById("fig" + i).getAttribute("cp");
currAngle = document.getElementById("fig" + i).getAttribute("a");
if (currPos == "150" || currPos == "0") {
newPos = parseInt(currPos) + (gap * 2) * (-1);
if (currPos == "0") {
newAngle = 30;
}
else if (currPos = "150") {
newAngle = 0;
}
else {
}
}
else {
newPos = parseInt(currPos) + (gap) * (-1);
newAngle = parseInt(currAngle);
}
if (i == current) {
document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg) translateZ(200px)";
}
else {
document.getElementById("fig" + i).style.webkitTransform = "translateX(" + newPos + "px) rotateY(" + newAngle + "deg)";
}
document.getElementById("fig" + i).setAttribute("cp", newPos);
document.getElementById("fig" + i).setAttribute("a", newAngle);
}
}
}
// show thumbnails functions
//function show(dname){
// if(window.XMLHttpRequest){
// xhttp=new XMLHttpRequest();
// }
// else{
// xhttp=new ActiveXObject(Microsoft.XMLHTTP);
// }
// xhttp.open("GET",dname,false);
// xhttp.send();
// var xmlDoc=xhttp.responseXML;
// var thumblist=xmlDoc.getElementsByTagName("asset");
// //str="";
// str="<li>";
// var image= new Array();
// for(i=0, tc=1; i<thumblist.length;i++){
// var x=thumblist[i].childNodes;
// for(j=0,index=0; j<x.length;j++){
// if(x[j].nodeType==1){
// image[index]=(x[j].firstChild.nodeValue);
// index++;
// }
// x[j]=x[j].nextSibling;
// }
// str+='<div><a href="'+image[2]+'"><img src="'+image[0]+'"></a><span>'+image[1]+'</span></div>';
// // tc<thumblist.length check for the last node
// if(tc%6==0&& tc<thumblist.length){
// str+="</li><li>";
// }
// tc++;
// // str+='<div class="thumbwrapper"><img src="'+image[0]+'">'+image[1]+'</div>';
// //str+='<li><img src="'+image[0]+'"><span>'+image[1]+'</span></li>';
// }
// str+="</li>";
// //alert(str);
// console.log(str);
// return str;
// }
function show(dname){
if(window.XMLHttpRequest){
xhttp=new XMLHttpRequest();
}
else{
xhttp=new ActiveXObject(Microsoft.XMLHTTP);
}
xhttp.open("GET",dname,false);
xhttp.send();
var xmlDoc=xhttp.responseXML;
var thumblist=xmlDoc.getElementsByTagName("asset");
//str="";
str="<li>";
var image= new Array();
for(i=0, tc=1; i<thumblist.length;i++){
// getting the attribute node of every assets
var thumb=thumblist[i].attributes;
str+='<div><a href="'+thumb.getNamedItem("url").nodeValue+'"><img src="'+thumb.getNamedItem("thumbnail").nodeValue+'"></a><span>'+thumb.getNamedItem("title").nodeValue+'</span></div>';
// (tc<thumblist.length) check for the last node
if(tc%6==0&& tc<thumblist.length){
str+="</li><li>";
}
tc++;
}
str+="</li>";
//alert(str);
console.log(str);
return str;
}
这是我的 HTML：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>GRAAVAA HTML5</title>
<link href="css/bgLandscape.css" rel="stylesheet" type="text/css">
<link href="css/bgLandscape.css" media="screen and (device-width:768px) and (orientation:landscape) or (-webkit-min-device-pixel-ratio: 2)" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/login.css" />
<link href="css/coverflow.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="bg">
<ul class="cb-slideshow">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<div id="formContainer" class="formContainer">
<form id="login" method="post" action="index.html" class="login">
<span id="msg" class="error"></span>
<!-- <input type="email" name="email" id="email" value="Email Address" class="stored" required="required" placeholder="admin@mail.com"/>-->
<input type="email" name="email" id="email" placeholder="Email Address" class="email" style="top:176px;" />
<input type="text" name="name" id="name" placeholder="Full Name" class="stored"/>
<!--<input type="reset" name="reset" value="Skip" />-->
<input type="button" name="skip" id="skip" value="Skip" class="skip" />
<input type="submit" name="submit" value="Save" class="submit" />
</form>
</div>
<!-- Collection By Type -->
<div id="wrapperType" class="collectionTypeWrapper">
<div class="container">
<div id="coverflow">
<div id="fig1" cp="-225" a="30" rel="xml/granite.xml"><img src="collectionType/granite.jpg" /></div>
<div id="fig2" cp="-150" a="30" rel="xml/marble.xml"><img src="collectionType/marble.jpg" /></div>
<div id="fig3" cp="0" a="0" rel="xml/onyx.xml"><img src="collectionType/onyx.jpg" /></div>
<div id="fig4" cp="150" a="-30" rel="xml/travertine.xml"><img src="collectionType/travertine.jpg" /></div>
<div id="fig5" cp="225" a="-30" rel="xml/limitededition.xml"><img src="collectionType/limited.jpg" /></div>
</div>
</div>
</div>
<!-- Collection By Color -->
<div id="wrapperColor" class="collectionColorWrapper">
<div class="container">
<div id="coverflow">
<div id="fig1" cp="-150" a="30" rel="xml/natural.xml"><img src="collectionColor/neutral.jpg" /></div>
<div id="fig2" cp="0" a="0" rel="xml/dark.xml"><img src="collectionColor/dark.jpg" /></div>
<div id="fig3" cp="150" a="-30" rel="xml/vivid.xml"><img src="collectionColor/vivid.jpg" /></div>
</div>
</div>
</div>
<div id="popupicon">
<img id="collectionColor" src="images/1.png" style="margin-left:15px" />
<img id="collectionType" src="images/2.png" style="margin:0px 0px 5px 35px" />
</div>
<div id="bottomImgWrapper" class="bottomImgWrapper"></div>
<div id="bottomImg" class="bottomImg" >
<img src="images/collection.png" class="graavaaImag" id="collection" />
<a href="applications.html"><img src="images/application.png" class="graavaaImag" /></a>
<a href="showrooms.html"><img src="images/showrooms.png" class="graavaaImag"/></a>
<img src="images/menuLogo.png" class="graavaaIcon" />
</div>
</div>
<script type="text/javascript">
$("img#collection").click(function(e){
e.preventDefault();
$("#popupicon").fadeToggle("slow");
});
$('#skip').click(function(){
//localStorage.clear();
$("#formContainer").css("display","none");
$("#bottomImgWrapper").css("display","block");
$("#bottomImg").css("display","block");
// setting the skip flag
sessionStorage.setItem('flag','true');
});
$('.login').submit(function() {
var email=$(this).children("#email").val();
var name=$(this).children("#name").val();
var result=validateEmail($(this).children("#email").val());
if(result==false){
//$(this).focus();
$(".error").html('Invalid Email Address');
$(".email").focus();
return false;
}
if(result==true){
$(".error").html('');
localStorage[$("#email").attr('name')] = email;
localStorage[$("#name").attr('name')] = name;
alert('Thank You for saving information');
$("#formContainer").css("display","none");
$(".bottomImgWrapper").css("display","block");
$(".bottomImg").css("display","block");
// Dont submit the form in any condition : as it refresh the page
return false;
//return true;
}
return false;
});
$('#collectionType').click(function(){
$(".collectionTypeWrapper").css("display","block");
$(".collectionColorWrapper").css("display","none");
$("#collectionColor").hide(".collectionTypeWrapper");
$("#collectionColor").show(".collectionTypeWrapper");
//$(".collectionTypeWrapper").fadeIn("slow");
//$(".collectionColorWrapper").fadeOut("slow");
$("#popupicon").fadeToggle("slow");
});
$('#collectionColor').click(function(){
$(".collectionColorWrapper").css("display","block");
$(".collectionTypeWrapper").css("display","none");
//$(".collectionTypeWrapper").fadeOut("slow");
//$(".collectionColorWrapper").fadeIn("slow");
$("#popupicon").fadeToggle("slow");
});
function validateEmail(txtEmail){
var filter = /^((\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*?)\s*;?\s*)+/;
if(filter.test(txtEmail)){
return true;
}
else{
return false;
}
}
$(document).ready(function(e) {
function init() {
//localStorage.clear();
// show the login form if localstorage not persent
if(!localStorage["email"]){
$("#formContainer").css({"display":"block"});
// hide the bottom images initially
$("#bottomImgWrapper").css("display","none");
$("#bottomImg").css("display","none");
}
// storing the value into application session
if(sessionStorage.flag=="true"){
$("#formContainer").css({"display":"none"});
$("#bottomImgWrapper").css("display","block");
$("#bottomImg").css("display","block");
}
if(localStorage["email"]){
$("#formContainer").css("display","none");
alert('You are already saved as : '+ localStorage["email"]);
}
}
init();
});
</script>
<script type="text/javascript" src="js/coverflow-color.js"></script>
<script type="text/javascript" src="js/coverflow-type.js"></script>
</body>
</html>