titi1363
سه شنبه 07 مرداد 1393, 20:13 عصر
سلام من میخوام یک اسلاید شو درست کنم این کدها رو از اینترنت گرفتم و نوشتم ،مشکل من اینه که تصاویر را پشت سرهم(از بالا به پایین) نشون میده ، به صورت اسلاید نمایش نمیده .لطفا راهنمایی کنید
مرسی
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/JScript.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
<style type="text/css">
* {
margin:0px;
padding:0px;
border:0px;
}
body {
background:url(images/1.jpg) repeat-x;
}
#slideshowContainer {
width: 632px;
margin: 100px auto 0 auto;
position:relative;
}
.slideshow {
height: 332px;
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#nav {
list-style-type:none;
z-index:150;
}
#nav li a {
display:block;
width:58px;
height:102px;
text-indent:-9999px;
outline:none;
}
#prev a {
background:url(images/2.jpg);
width:58px;
height:102px;
position:absolute;
top:120px;
left:-70px;
}
#next a {
background:url(images/3.jpg);
width:58px;
height:102px;
position:absolute;
top:120px;
right:-70px;
}
#next a:hover {
background:url(images/4.jpg);
}
#prev a:hover {
background:url(images/5.jpg);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="slideshowContainer">
<div class="slideshow">
<img src="image/1.jpg" alt="" width="600" height="300" />
<img src="image/2.jpg" alt="" width="600" height="300" />
<img src="image/3.jpg" alt="" width="600" height="300" />
<img src="image/4.jpg" alt="" width="600" height="300" />
</div>
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
ودر قسمت jscript کد زیر را نوشتم
$('#slideshow').cycle('command');
// override these globally if you like (they are all optional)
$.fn.cycle.defaults = {
activePagerClass: 'activeSlide', // class name used for the active pager element
after: null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling
animIn: null, // properties that define how the slide animates in
animOut: null, // properties that define how the slide animates out
autostop: 0, // true to end slideshow after X transitions (where X == slide count)
autostopCount: 0, // number of transitions (optionally used with autostop to define X)
backwards: false, // true to start slideshow at last slide and move backwards through the stack
before: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE)
cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
containerResize: 1, // resize container to fit largest slide
continuous: 0, // true to start next transition immediately after current one completes
cssAfter: null, // properties that defined the state of the slide after transitioning out
cssBefore: null, // properties that define the initial state of the slide before transitioning in
delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
easeIn: null, // easing for "in" transition
easeOut: null, // easing for "out" transition
easing: null, // easing method for both in and out transitions
end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
fit: 0, // force slides to fit container
fx: 'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
height: 'auto', // container height (if the 'fit' option is true, the slides will be set to this height as well)
manualTrump: true, // causes manual transition to stop an active transition instead of being ignored
metaAttr: 'cycle', // data- attribute that holds the option data for the slideshow
next: null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for next slide
nowrap: 0, // true to prevent slideshow from wrapping
onPagerEvent: null, // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
onPrevNextEvent: null, // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
pager: null, // element, jQuery object, or jQuery selector string for the element to use as pager container
pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
pagerEvent: 'click.cycle', // name of event which drives the pager navigation
pause: 0, // true to enable "pause on hover"
pauseOnPagerHover: 0, // true to pause when hovering over pager link
prev: null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for previous slide
prevNextEvent: 'click.cycle', // event which drives the manual transition to the previous or next slide
random: 0, // true for random, false for sequence (not applicable to shuffle fx)
randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
requeueTimeout: 250, // ms delay for requeue
rev: 0, // causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle)
shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 }
slideExpr: null, // expression for selecting slides (if something other than all children is required)
slideResize: 1, // force slide width/height to fixed size before every transition
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: null, // speed of the 'in' transition
speedOut: null, // speed of the 'out' transition
startingSlide: 0, // zero-based index of the first slide to be displayed
sync: 1, // true if in/out transitions should occur simultaneously
timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
updateActivePagerLink: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
width: null // container width (if the 'fit' option is true, the slides will be set to this width as well)
};
مرسی
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/JScript.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
<style type="text/css">
* {
margin:0px;
padding:0px;
border:0px;
}
body {
background:url(images/1.jpg) repeat-x;
}
#slideshowContainer {
width: 632px;
margin: 100px auto 0 auto;
position:relative;
}
.slideshow {
height: 332px;
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#nav {
list-style-type:none;
z-index:150;
}
#nav li a {
display:block;
width:58px;
height:102px;
text-indent:-9999px;
outline:none;
}
#prev a {
background:url(images/2.jpg);
width:58px;
height:102px;
position:absolute;
top:120px;
left:-70px;
}
#next a {
background:url(images/3.jpg);
width:58px;
height:102px;
position:absolute;
top:120px;
right:-70px;
}
#next a:hover {
background:url(images/4.jpg);
}
#prev a:hover {
background:url(images/5.jpg);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="slideshowContainer">
<div class="slideshow">
<img src="image/1.jpg" alt="" width="600" height="300" />
<img src="image/2.jpg" alt="" width="600" height="300" />
<img src="image/3.jpg" alt="" width="600" height="300" />
<img src="image/4.jpg" alt="" width="600" height="300" />
</div>
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
ودر قسمت jscript کد زیر را نوشتم
$('#slideshow').cycle('command');
// override these globally if you like (they are all optional)
$.fn.cycle.defaults = {
activePagerClass: 'activeSlide', // class name used for the active pager element
after: null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling
animIn: null, // properties that define how the slide animates in
animOut: null, // properties that define how the slide animates out
autostop: 0, // true to end slideshow after X transitions (where X == slide count)
autostopCount: 0, // number of transitions (optionally used with autostop to define X)
backwards: false, // true to start slideshow at last slide and move backwards through the stack
before: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE)
cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
containerResize: 1, // resize container to fit largest slide
continuous: 0, // true to start next transition immediately after current one completes
cssAfter: null, // properties that defined the state of the slide after transitioning out
cssBefore: null, // properties that define the initial state of the slide before transitioning in
delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
easeIn: null, // easing for "in" transition
easeOut: null, // easing for "out" transition
easing: null, // easing method for both in and out transitions
end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
fit: 0, // force slides to fit container
fx: 'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
height: 'auto', // container height (if the 'fit' option is true, the slides will be set to this height as well)
manualTrump: true, // causes manual transition to stop an active transition instead of being ignored
metaAttr: 'cycle', // data- attribute that holds the option data for the slideshow
next: null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for next slide
nowrap: 0, // true to prevent slideshow from wrapping
onPagerEvent: null, // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
onPrevNextEvent: null, // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
pager: null, // element, jQuery object, or jQuery selector string for the element to use as pager container
pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
pagerEvent: 'click.cycle', // name of event which drives the pager navigation
pause: 0, // true to enable "pause on hover"
pauseOnPagerHover: 0, // true to pause when hovering over pager link
prev: null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for previous slide
prevNextEvent: 'click.cycle', // event which drives the manual transition to the previous or next slide
random: 0, // true for random, false for sequence (not applicable to shuffle fx)
randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
requeueTimeout: 250, // ms delay for requeue
rev: 0, // causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle)
shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 }
slideExpr: null, // expression for selecting slides (if something other than all children is required)
slideResize: 1, // force slide width/height to fixed size before every transition
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: null, // speed of the 'in' transition
speedOut: null, // speed of the 'out' transition
startingSlide: 0, // zero-based index of the first slide to be displayed
sync: 1, // true if in/out transitions should occur simultaneously
timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
updateActivePagerLink: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
width: null // container width (if the 'fit' option is true, the slides will be set to this width as well)
};