javascript - 尝试使用 jquery 制作 slider

标签 javascript jquery html css

我正在尝试使用 jquery 制作一个 slider 。我为我的 slider 下载了循环插件并将其也包含在我的文件中......我为我的 slider 使用 7 图片。下面是代码......请告诉有什么问题

<!DOCTYPE html>
<html>
<head>
<style>
#hero{width:200px;height:220px;display:block;position:relative;margin:auto;border-style:solid;border-color:grey;}
#slider{width:200px;height:200px;display:block;position:absolute;}
#next{display:block;float:right;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;}
#prev{display:block;float:left;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;}
</style>

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

$('#slider').cycle({

    fx:         'scrollHorz',
    timeout:    2000,
    next:       '#next',
    prev:       '#prev'

});
</script>
</head>
<body>
<div id="hero">

<div id="prev">
<img src="right.jpg">
</div>

<div id="next">
<img src="left.jpg">
</div>

<div id="slider">
<div id="1"><img  src="1.jpg"></div><br><br>
<div id="2"><img  src="2.jpg"></div><br>
<div id="3"><img  src="3.jpg"></div><br>
<div id="4"><img  src="4.jpg"></div><br>
<div id="5"><img  src="5.jpg"></div><br>
<div id="6"><img src="6.jpg"></div><br>
<div id="7"><img  src="7.jpg"></div><br>
</div>

</div>


</body>
</html>

最佳答案

你试过改变插件的位置吗?不应该<script type="text/javascript" src="jquery-2.1.0.min.js"></script><script type="text/javascript" src="jquery.cycle.all.js"></script>之前?

关于javascript - 尝试使用 jquery 制作 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23329206/

相关文章:

jquery - 工具提示中的浏览器兼容性问题

Jquery 获取先前输入文本字段的值

c++ - htmlcxx API 用法

javascript - Jquery UI Calendar//按月更改背景图片

javascript - 在 Kendo Angular DatePicker 中禁用 future 日期

javascript - js getHours() 返回时间提前 5 小时

javascript - 这个 JavaScript/HTML 有什么问题

javascript - 我想使用 Jquery 向我的 html 元素添加更多 css 属性,这意味着我不想删除前一个属性,只需添加更多属性即可

jquery - 使用 CSS 或 jQuery 隐藏特定网页的页眉和页脚

php - 在网页上包含评论系统