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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
JScript的条件编译
May 29 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
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 循环列出目录内容的函数代码
2010/05/26 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
php中namespace及use用法分析
2016/12/06 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue多次循环操作示例
2019/02/08 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
opencv实现简单人脸识别
2021/02/19 Python
python实现感知机模型的示例
2020/09/30 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
RealTek面试题
2016/06/28 面试题
2015年前台个人工作总结
2015/04/03 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server