In this paper, the method of implementing the random switching effect of the focus picture in jquery is described. Share to everyone for your reference. Specifically as follows:
1. The operation effect is shown in the following illustration:
2. Complete example code click here to download the site.
3. The complete code is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>slides, A slideshow Plugin for jquery</title>
<link rel= "stylesheet" href= "Css/global.css" >
<script src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script src= "Http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" ></script>
<script src= "Js/slides.min.jquery.js" ></script>
<script>
$ (function () {
var easings = [];
var row = 0;
for (var x in jquery.easing) {
if (x!= ' linear ' && x!= ' swing ') {
easings[row++] = x;
}
}
$ (' #slides '). Slides ({
Preload:true,
Preloadimage: ' Img/loading.gif ',
play:5000,
PAUSE:2500,
Slideeasing: "Swing",
slidespeed:2000,
Hoverpause:true,
Animationcomplete:function (current) {
var index = Math.floor (Math.random () * easings.length);
JQuery.easing.def = Easings[index];
}
});
});
</script>
<body>
<div id= "Container" >
<div id= "Example" >
<div id= "Slides" >
<div class= "Slides_container" >
<a href= "http://www.flickr.com/photos/jliba/4665625073/" title= "145.365-happy bokeh thursday! | Flickr-photo sharing! "target=" _blank "></a>
<a href= "http://www.flickr.com/photos/stephangeyer/3020487807/" title= "Taxi | Flickr-photo sharing! "target=" _blank "></a>
<a href= "http://www.flickr.com/photos/childofwar/2984345060/" title= "Happy bokeh Day | Flickr-photo sharing! "target=" _blank "></a>
<a href= "http://www.flickr.com/photos/b-tal/117037943/" title= "We Eat Light | Flickr-photo sharing! "target=" _blank "></a>
<a href= "http://www.flickr.com/photos/bu7amd/3447416780/" title= "I must go down to the sea again, to the lonely D the Sky; And all I ask are a tall ship and a star to steer her by. "| Flickr-photo sharing! "target=" _blank "></a>
<a href= "http://www.flickr.com/photos/streetpreacher/2078765853/" title= "Twelve.inch | Flickr-photo sharing! "target=" _blank "></a>
<a href= "http://www.flickr.com/photos/aftab/3152515428/" title= "Save My Love for Loneliness | Flickr-photo sharing! "target=" _blank "></a>
</div>
<a href= "#" class= "prev" ></a>
<a href= "#" class= "Next" ></a>
</div>
</div>
<div id= "Footer" >
<p>for full instructions go to <a href= "http://slidesjs.com" target= "_blank" >http://slidesjs.com</a >.</p>
<p>slider design by Orman Clark at <a href= "http://www.premiumpixels.com/" target= "_blank" >premium Pixels </a>. Can donwload the source PSD at <a href= "http://www.premiumpixels.com/clean-simple-image-slider-psd/" target= "_ Blank ">premium pixels</a></p>
<p>©2010 <a href= "http://nathansearles.com" target= "_blank" >nathan searles</a>. All rights reserved. Slides is licensed under the <a href= "http://www.apache.org/licenses/LICENSE-2.0" target= "_blank" >apache LICENSE </a>.</p>
</div>
</div>
</body>
I hope this article will help you with your jquery programming.
