简体   繁体   中英

trying to make slider using jquery

I m trying to make a slider using jquery..i downloaded the cycle plugin for my slider and included that too in my file...im using 7 pic for my slider.. below is the code...please tell what is the problem

<!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>

Have you tried to change the position of plugins? Shouldn't <script type="text/javascript" src="jquery-2.1.0.min.js"></script> be before <script type="text/javascript" src="jquery.cycle.all.js"></script> ?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM