Sadjad/slide_Show.html at master · seeking/Sadjad · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--
<script type="text/javascript" src="src/jquery.slideshow.js"></script>
<script type="text/javascript" src="src/jquery.cycle.all.latest.js"></script>
-->
<script type="text/javascript" src="src/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="src/jquery.cycle.all.js"></script>
<style type="text/css">
div.slideShow ul{
	list-style-type:none;
}
</style>
</head>
<body>
	<div class="banner">
		<div class="lft">
			<div class="slideShow">
				<ul class="slides">
					<li class="slide"><img src="images/0.png" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/1.png" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/2.png" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/3.png" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/4.png" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/5.png" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/6.png" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/7.jpg" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/8.jpg" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/9.jpg" width="715" height="310" border="0" alt="" /></li>
					<li class="slide"><img src="images/10.jpg" width="715" height="310" border="0" alt="" /></li>
				</ul>
			</div>
		</div>
	</div>
<script type="text/javascript">
$.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)
};
    $(document).ready(function() {
        $('.slideShow .slides').cycle({
		fx:     'shuffle',
        pause: 1,
		speed:1000
        });
    });
</script>
</body>
</html>