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 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
DIV始终居中的js代码
Feb 17 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Javascript webpack动态import
Apr 19 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提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
python数据结构之图的实现方法
2015/07/08 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python中import机制详解
2017/11/14 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Django实现分页功能
2018/07/02 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
python安装本地whl的实例步骤
2019/10/12 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
本科生求职信
2014/06/17 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
企业2014年度工作总结
2014/12/10 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python