0
私はeasyslider1.7 jqueryプラグインを使用してスクロール可能なスライダーエフェクトを生成しています。以下は私のHTMLで、プラグインを使って効果を作り出しています。easySlider1.7の使用、別のJavaScript関数の妨げ
<html>
<head>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/CSS1.css"/>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/screen.css"/>
<script type="text/javascript" src="../JS/Base.js"></script>
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true
});
});
</script>
<title>Realtime Notification Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body class="bodycustom1">
<iframe id="NotificationIframe" name="NotificationIframe" src="Notifications.html" seamless>
</iframe>
<br>
<div id="content">
<div id="slider">
<ul>
<li> <font onclick="changeIframeSrc('Notifications.html')">All</font>  
<img src="../icons/Alfresco.png" id="Alfresco" alt="Alfresco" onclick="changeIframeSrc('AlfrescoNotificationDeck.html')"/>  
<img src="../icons/GoogleCalendar.png" id="GoogleCalendar" alt="GoogleCalendar" onclick="changeIframeSrc('GCalNotificationDeck.html')"/>  
<img src="../icons/Linkedin.png" id="Linkedin" alt="LinkedIn" onclick="changeIframeSrc('LinkedInNotificationDeck.html')"/>  
<img src="../icons/Rss.png" id="Rss" alt="RSS" onclick="changeIframeSrc('RSSNotificationDeck.html')"/>
<br>
   
<img src="../icons/On.png" alt="On" id="one" onclick="toggleType('Alfresco','one');"/>  
<img src="../icons/On.png" alt="On" id="two" onclick="toggleType('GoogleCalendar','two');"/>  
<img src="../icons/On.png" alt="On" id="three" onclick="toggleType('Linkedin','three');"/>  
<img src="../icons/On.png" alt="On" id="four" onclick="toggleType('Rss','four');"/>
</li>
<li >
<img src="../icons/Salesforce.png" id="Salesforce" alt="Salesforce" onclick="changeIframeSrc('SFNotificationDeck.html')"/>  
<img src="../icons/Sharepoint.png" id="Sharepoint" alt="Sharepoint" onclick="changeIframeSrc('SPNotificationDeck.html')"/>  
<img src="../icons/Connections.png" id="Connections" alt="IBM Connections" onclick="changeIframeSrc('IBMConnNotificationDeck.html')"/>
<br>
<img src="../icons/On.png" alt="On" id="five" onclick="toggleType('Salesforce','five');"/>  
<img src="../icons/On.png" alt="On" id="six" onclick="toggleType('Sharepoint','six');"/>  
<img src="../icons/On.png" alt="On" id="seven" onclick="toggleType('Connections','seven');"/>
</li>
</ul>
</div>
</div>
</body>
Iはオフおよびその逆に上から画像を切り替えるためにJavaScriptメソッドを書き込み、また、特定の通知タイプの画像を変更しています。上記のHTMLの[オン]ボタンをクリックすると、2つの変更が行われます。[オン]ボタンは[オフ]ボタンに変わります。そして、その上の画像の境界線は、赤い境界線の画像に変わるはずです。オフボタンのためのVIce Versa。
function toggleType(channelType,button){
var type=document.getElementById(channelType);
var polarity=document.getElementById(button);
var situation=polarity.alt;
if(situation=="On"){
type.src="../icons/"+channelType+"RB.png";
type.style.cursor="auto";
polarity.src="../icons/Off.png";
polarity.alt="Off";
}else if(situation=="Off"){
type.src="../icons/"+channelType+".png";
type.style.cursor="pointer";
polarity.src="../icons/On.png";
polarity.alt="On";
}
}
問題は、私のjavascript関数が最初のli要素にある最初の4つの画像に対して望ましい結果を生成することです。しかし、私が他のli要素の次の画像セットにスライドすると、JavaScript機能が動作しなくなります。それはイメージを変えず、オン/オフボタンをトグルします。
私に助けてください。私はjqueryを初めて使っています。