2012-06-01 50 views
1

我确信这已被问过,但我已经尝试了一些其他答案,迄今没有任何工作。另外这是一个两部分问题。添加下一个和后退箭头到jquery幻灯片

1.我需要在我的jquery图像carousal中插入后退箭头和下一个箭头。

这里是链接到当前的一个:http://www.bmww.com/clients/index3/casestudies/cabrini_casestudy.html

我需要的相关性保持突出显示,以插入箭头,即使图像的数字。我宁愿不改变过渡效果,除非由于某种原因,否则我不能实现这一点。以下是我的代码,但请让我知道你是否需要其他任何东西来回答我的问题。

这里是我的html代码:

<div align="center" class="slideshow" style="height:500px; float:none"> 

    <ul style="margin-top:-30px"> 
    <li><img src="images/cabrini_1.png" alt="lemon" /></li><!--MUST ALWAYS HAVE THIS HERE AND BE THE SAME IMAGE AS NEXT IMAGE--> 
    <li><img src="images/cabrini_1.png" alt="lemon tea" /></li> 
    <li><img src="images/cabrini_2.png" alt="splashing lemon" /></li> 
    <li><img src="images/cabrini_3.png" alt="salad with lemon" /></li> 
    <li><img src="images/cabrini_4.png" alt="lemonade!" /></li> 
    <li><img src="images/cabrini_5.png" alt="sliced lemon" /></li> 
    <li><img src="images/cabrini_6.png" alt="dripping lemon" /></li> 
    </ul> 
</div> 

<div id="casenumbers" align="right" style="margin-right:10px"> 


<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0); return false"></a><!--MUST ALWAYS HAVE THIS HERE AND BE THE SAME IMAGE AS NEXT IMAGE BUT ALWAYS KEEP HIDDEN--> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1); return false">1</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2); return false">2</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(3); return false">3</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(4); return false">4</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(5); return false">5</a> 
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(6); return false">6</a> 
<a href="cabrini_casestudy2.html" class="ex1" > &#187; </a> 

</div> <!--end slideshow div--> 

这里是我的CSS代码:

<style> 
    a{color: #666335;} 
    a.clicked{ color: #D85D27;} 
    </style> 

和我的脚本:

 <script type="text/javascript"> 
     $(window).load(function() { 
$('.slideshow').blinds(); 


    }) 
    $(document).ready(function(){ 
    $('a.change_link').click(function(){ 
$('.clicked').removeClass('clicked'); 
$(this).addClass('clicked'); 
}); 

    }) 
    </script> 

2.我不知道你是否所有当你点击示例链接时看到它,但有时当我做一个奇怪的滚动条弹出和我的整个列表法师将在所有内容加载之前显示一秒钟。有没有我可以添加的一段代码或一个旋转的轮子会出现,所以它不会显示,直到完全正确加载?

在此先感谢大家!对不起,即时通讯仍在学习,所以我知道这可能看起来像一个简单或荒谬的问题。

回答

0

在文件准备:

$(document).keyup(
    function(e) 
    { 
     if(e.keyCode == left) 
      //decrement blinds 
     else if(e.keyCode == right) 
      //increment blinds 
     else;//do nothing 
    }); 

你必须来查找键码的左,右箭头。

+0

确定这里是新的链接...我决定使用以下箭头:http://www.bmww.com/clients/index3/casestudies/cabrini_casestudy-test.html – kaitlyn

+0

对不起...那么我能这样做? – kaitlyn

+0

这样做会将整个文档的事件“keyup”绑定到该委托函数。从本质上讲,任何时候在文档中按下某个键时,它都会检查键码是否匹配,并在匹配时执行代码(我的注释在哪里) – Codeman

相关问题