Question

我有一个使用jquery.cycle的小幻灯片库 http://jquery.malsup.com/cycle/

但我也希望在iphone或ipad上使用滑动触摸，所以我尝试使用此脚本。 http://www.zackgrossbart.com/hackito/touchslider/

但是我无法将这些脚本一起工作，只有其中一个工作这里有我的脚本

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<!--jquery cycle-->
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.2.72.js"></script>
<!-- -->

<!--touchslider-->
<script type="text/javascript" src="touchslider.js"></script>
<link type="text/css" rel="stylesheet" href="touchslider.css" />
<!-- -->

<script type="text/javascript">
$(document).ready(function() {

var $container = $('#slidebar').cycle({
    fx: 'fade',
    speed: 300,
    timeout: 0,


 pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
    // return selector string for existing anchor 
    return '#nav li:eq(' + idx + ') a'; 
}       

});

touchslider.createSlidePanel('#slidebar', 400, 0);

});
</script>
</head>
<body>

<div id="slidecont" >

 <div id="slidebar">

<div class="cell" id="maintitle"><img src="1.jpg" width="400" height="600" /></div>

<div class="cell"><img src="2.jpg" width="400" height="600" /></div>

<div class="cell"><img src="3.jpg" width="400" height="600" /></div>

<div class="cell"><img src="4.jpg" width="400" height="600" /></div>

   </div>
 </div>

<ul id="nav">
<li><a href="">foto1</a></li>
<li><a href="">foto2</a></li>
<li><a href="">foto3</a></li>
<li><a href="">foto4</a></li>
</ul>

<div id="output"></div>

</body>
</html>

任何使这些脚本协同工作的想法？提前谢谢!!

jquery.cycle和touchslider.js一起工作？

0 个答案: