jQuery实现友好的轮播图片特效


Posted in Javascript onJanuary 12, 2015

先上效果图:

jQuery实现友好的轮播图片特效

【处理】 这里的图片滚动轮播,做了点小处理:当在第1页状态时,你点击第5页,图片的滚动是一张滑过,而不是从2-3-4-5(这种的多张滚动,看得头晕眼花);

实现的做法是:

jQuery实现友好的轮播图片特效

剩下的就是源代码分享了:

-------css----------------

.gy-slide-scroll {

        position: relative;

        width: 320px;

        height: 200px;

        overflow: hidden;

        left: 50%;

        margin-left: -160px;

    }

    .gy-slide-scroll ul{

        position: absolute;

        left: 0;

        top: 0;

    }

    .gy-slide-btn {

        margin-top: 10px;

        text-align: center;

        padding: 5px 0;

    }

    .gy-slide-btn span,.gy-slide-btn i {

        margin-left: 5px;

        font-style: normal;

        font:12px/1 tahoma,arial,"Hiragino Sans GB",\5b8b\4f53;

        cursor: pointer;

        border: 1px solid #ccc;

        padding: 4px 6px;

    }

    .gy-slide-btn .gy-slide-cur {

        background-color: #999;

        color: #fff;

    }

    .gy-slide-btn .gy-slide-no{

        color: #ccc;

        cursor: default;

    }

-----------HTML---------------------

<div id="gy-slide">

        <div class="gy-slide-scroll">

            <ul>

                <li><a href="#"><img src="img/n1.jpg" alt=""></a></li>

                <li><a href="#"><img src="img/n2.jpg" alt=""></a></li>

                <li><a href="#"><img src="img/n3.jpg" alt=""></a></li>

                <li><a href="#"><img src="img/n4.jpg" alt=""></a></li>

                <li><a href="#"><img src="img/n5.jpg" alt=""></a></li>

            </ul>

        </div>

        <div class="gy-slide-btn">

            <i class="gy-slide-home">首页</i>

            <i class="gy-slide-prev gy-slide-no">上一页</i>

            <span class="gy-slide-cur">1</span>

            <span>2</span>

            <span>3</span>

            <span>4</span>

            <span>5</span>

            <i class="gy-slide-next">下一页</i>

            <i class="gy-slide-end">尾页</i>

        </div>

    </div>

-------------JS--------------

/*----使用说明

结构必需一致;多次调用时,最外层赋予不同的id或类名即可

*/

/*----参数

@ wrap [String] 外层元素的类名或id

@ auto [Boolean] 不设置默认是不自动播放;设置为true,自动播放

@ speed [Number] 每隔几秒图片切换,默认是4秒

*/

function Gy_slider(opt){

    this.wrap = $(opt.wrap);

    this.scroll = this.wrap.find('.gy-slide-scroll ul');

    this.li = this.scroll.find('li');

    this.btn_num = this.wrap.find('.gy-slide-btn span');

    this.btn_home = this.wrap.find('.gy-slide-home');

    this.btn_end = this.wrap.find('.gy-slide-end');

    this.btn_prev = this.wrap.find('.gy-slide-prev');

    this.btn_next = this.wrap.find('.gy-slide-next');

    this.index = 0; //索引

    this.refer = 0; 

    this.ctrl = true;

    this.len = this.li.length;

    this.move_w = this.scroll.parent().width();

    this.auto = opt.auto == true?true:false;

    this.speed = opt.speed || 4;

    this.init();

}

Gy_slider.prototype = {

    imgShow:function(i,callback){

        var _that = this,

            _w = 0;

        switch(true){

            case i<this.refer : _w = - this.move_w;break;

            case i==this.refer : return;break;

            default:_w = this.move_w;

            }

        this.refer = i;

        this.li.eq(i).css({'position':'absolute','left':_w+'px','top':0});

        this.scroll.stop(true,true).animate({'left':-_w+'px'},function(){

            _that.scroll.css({'left':0});

            _that.li.attr('style','').eq(i).css({'position':'absolute','left':0,'top':0});

            if(typeof callback == 'function'){

                callback();

            }

        });

        this.btn_num.removeClass("gy-slide-cur").eq(i).addClass("gy-slide-cur");

    },

    isCtrl:function(n){

        this.btn_prev.add(this.btn_next).removeClass("gy-slide-no");

        if(n==0){

            this.btn_prev.addClass("gy-slide-no");

        }else if(n==(this.len-1)){

            this.btn_next.addClass("gy-slide-no");

        }

    },

    btnClick:function(){

        var _that = this;

        //页码处理

        this.btn_num.click(function(){

            if(_that.btn_num.index($(this))==_that.index) return;

            if(!_that.ctrl) return;

            _that.ctrl = false;

            _that.index = _that.btn_num.index($(this));

            _that.isCtrl(_that.index);

            _that.imgShow(_that.index,function(){

                _that.ctrl = true;

            });

        });

        //首页

        this.btn_home.click(function(){

            _that.index = 0;

            _that.isCtrl(_that.index);

            _that.imgShow(_that.index);

        });

        //尾页

        this.btn_end.click(function(){

            _that.index = _that.len - 1;

            _that.isCtrl(_that.index);

            _that.imgShow(_that.index);

        });

        //上一页

        this.btn_prev.click(function(){

            if($(this).hasClass("gy-slide-no")) return;

            if(!_that.ctrl) return;

            _that.ctrl = false;

            _that.index--;

            _that.isCtrl(_that.index);

            _that.imgShow(_that.index,function(){

                _that.ctrl = true;

            });

        });

        //下一页

        this.btn_next.click(function(){

            if($(this).hasClass("gy-slide-no")) return;

            if(!_that.ctrl) return;

            _that.ctrl = false;

            _that.index++;

            _that.isCtrl(_that.index);

            _that.imgShow(_that.index,function(){

                _that.ctrl = true;

            });

        });
    },

    autoPlay:function(){

        var _that = this;

        if(this.timer) clearInterval(this.timer);

        this.timer = setInterval(function(){

            _that.index++;

            if(_that.index==_that.len){

                _that.index = 0;

            }

            _that.isCtrl(_that.index);

            _that.imgShow(_that.index);

        },this.speed*1000);

    },

    init:function(){    

        var _that = this;        

        this.btnClick();

        if(this.auto){

            this.autoPlay();

            this.wrap.hover(function(){

                clearInterval(_that.timer);

            },function(){

                _that.autoPlay();

            });

        }

    }

}

代码很简洁,效果却非常棒,也很实用,小伙伴们自己美化下就可以使用到自己的项目中了。

Javascript 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
js函数内变量的作用域分析
Jan 12 #Javascript
Jquery api 速查表分享
Jan 12 #Javascript
js常用系统函数用法实例分析
Jan 12 #Javascript
javascript使用appendChild追加节点实例
Jan 12 #Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 #Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 #Javascript
jQuery制作拼图小游戏
Jan 12 #Javascript
You might like
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
关于Django外键赋值问题详解
2017/08/13 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
教师考核评语大全
2014/12/31 职场文书
武夷山导游词
2015/02/03 职场文书
党员违纪检讨书
2015/05/05 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
Python 制作自动化翻译工具
2021/04/25 Python