Question

我使用easyslider1.7 jquery插件来生成可滚动的滑块效果。下面是我的HTML，其中我使用插件来产生效果。

<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>&emsp;&emsp;
                <img src="../icons/Alfresco.png" id="Alfresco" alt="Alfresco" onclick="changeIframeSrc('AlfrescoNotificationDeck.html')"/>&emsp;&emsp;
                <img src="../icons/GoogleCalendar.png" id="GoogleCalendar" alt="GoogleCalendar" onclick="changeIframeSrc('GCalNotificationDeck.html')"/>&emsp;&emsp;
                <img src="../icons/Linkedin.png" id="Linkedin" alt="LinkedIn" onclick="changeIframeSrc('LinkedInNotificationDeck.html')"/>&emsp;&emsp;
                <img src="../icons/Rss.png"  id="Rss" alt="RSS" onclick="changeIframeSrc('RSSNotificationDeck.html')"/>
                <br>
                &emsp;&emsp;&emsp;
                <img src="../icons/On.png" alt="On" id="one" onclick="toggleType('Alfresco','one');"/>&emsp;&emsp;
                <img src="../icons/On.png" alt="On" id="two" onclick="toggleType('GoogleCalendar','two');"/>&emsp;&emsp;
                <img src="../icons/On.png" alt="On" id="three" onclick="toggleType('Linkedin','three');"/>&emsp;&emsp;
                <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')"/>&emsp;&emsp;
                <img src="../icons/Sharepoint.png" id="Sharepoint" alt="Sharepoint" onclick="changeIframeSrc('SPNotificationDeck.html')"/>&emsp;&emsp;
                <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');"/>&emsp;&emsp;
                <img src="../icons/On.png" alt="On" id="six" onclick="toggleType('Sharepoint','six');"/>&emsp;&emsp;
                <img src="../icons/On.png" alt="On" id="seven" onclick="toggleType('Connections','seven');"/>
                </li>
            </ul>
        </div>
    </div>
</body>

我编写了一个javascript方法，用于将图像从打开切换为关闭，反之亦然，还可以更改特定通知类型的图像。通过单击上面HTML中的On按钮，应该发生两个更改On按钮应该更改为Off按钮。并且其上方图像的边框应更改为红色边框图像。 VIce Versa for Off按钮。

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的新手。

Answer 1

问题在于最后一个<li>元素中的元素。我评论了 easySlider1.7.js 下面给出的一行，问题就消失了。

$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));

我不知道它发生的确切原因。

使用easySlider1.7，阻碍了另一个JavaScript函数

1 个答案: