jquery实现焦点图片随机切换效果的方法


Posted in Javascript onMarch 12, 2015

本文实例讲述了jquery实现焦点图片随机切换效果的方法。分享给大家供大家参考。具体如下:

1. 运行效果如下图所示:

jquery实现焦点图片随机切换效果的方法

2.完整实例代码点击此处本站下载。

3.完整代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

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

</head>

<body>

    <div id="container">

        <div id="example">

            <img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">

            <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"><img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>

                    <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>

                    <a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>

                    <a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>

                    <a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>

                    <a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>

                    <a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>

                </div>

                <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>

                <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>

            </div>

            <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">

        </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>. You 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>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
Angular2库初探
Mar 01 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
vue+element实现表单校验功能
May 20 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 #Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 #Javascript
Javascript数据结构与算法之列表详解
Mar 12 #Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 #Javascript
基于jquery实现的自动补全功能
Mar 12 #Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 #Javascript
window.open()实现post传递参数
Mar 12 #Javascript
You might like
php实现的验证码文件类实例
2015/06/18 PHP
php表单处理操作
2017/11/16 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
input的focus方法使用
2010/03/13 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python的UTC时间转换讲解
2019/02/26 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python实现的Iou与Giou代码
2020/01/18 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
亲子拓展活动方案
2014/02/20 职场文书
销售代理协议书
2014/09/30 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
党员查摆剖析材料
2014/10/10 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
舞蹈社团活动总结
2015/05/07 职场文书