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 相关文章推荐
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
详解JavaScript自定义函数
Jul 29 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
在Django的session中使用User对象的方法
2015/07/23 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
学校办公室主任职责
2013/12/27 职场文书
护士自我介绍信
2014/01/13 职场文书
大学生简历求职信
2014/06/24 职场文书
应聘护士求职信
2014/07/21 职场文书
2014年教学工作总结
2014/11/13 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python