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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
理解jquery事件冒泡
Jan 03 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
webpack入门必知必会
Jan 16 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php数组转成json格式的方法
2015/03/09 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python批量下载抖音视频
2019/06/17 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
年终自我鉴定
2013/10/09 职场文书
服装厂厂长职责
2013/12/16 职场文书
社区党员先进事迹
2014/01/22 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
明确岗位职责
2015/02/14 职场文书
贫困证明怎么写
2015/06/16 职场文书
电视新闻稿
2015/07/17 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书