jquery 幻灯片轮播图

最新推荐文章于 2021-09-09 20:15:49 发布

zhangchong_dk

最新推荐文章于 2021-09-09 20:15:49 发布

阅读量784

点赞数

分类专栏： jQuery 文章标签： jquery slide

本文链接：https://blog.csdn.net/zhangchong_dk/article/details/25137805

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何利用jQuery库创建一个功能齐全的幻灯片轮播图，包括HTML布局、CSS样式和jQuery代码实现动态切换、自动播放等功能。

摘要由CSDN通过智能技术生成

jquery 轮播图

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="./js/slide.jquery.js"></script>
    <title>jQuery 滑动幻灯片</title>
    <style>
        .box{width:800px; height:300px; margin:0 auto;overflow:hidden;}
    </style>
</head>
<body>
    <div class="box">
        <a href="javascript:;"><img src="images/1.jpg" alt="图片1" /></a>
        <a href="javascript:;"><img src="images/2.jpg" alt="图片2" /></a>
        <a href="javascript:;"><img src="images/3.jpg" alt="图片3" /></a>
        <a href="javascript:;"><img src="images/4.jpg" alt="图片4" /></a>
        <a href="javascript:;"><img src="images/5.jpg" alt="图片5" /></a>
    </div>
</body>
</html>

调用：

<script type="text/javascript">
    $('.box').slide({
        //playTime:1500,  //轮播暂停时间          默认1500
        //animaTime:800,  //动画执行时间          默认500
        //hover:false,    //鼠标放到图片是否暂停  默认true
        //width:800,      //图片的宽度            默认自动获取盒子的宽度
        //height:300,     //图片高度              默认自动获取盒子的高度
        //label:'a',      //子标签名称            默认a标签 如：<li><img src="1.jpg" /></li> 就是'li'
        //autoPlay:true   //是否自动播放          默认true
    });
</script>

slide.jquery.js

(function($) {
    $.fn.slide=(function(options) {
        var _this = $(this);
        _this.css('overflow','hidden');
        var _param = {width:_this.width(),height:_this.height(),label:'a',autoPlay:true,playTime:1500,animaTime:500,hover:true};
        $.extend(_param,options);
        _this.find('img').css({width:_param.width,height:_param.height,'border':'none'});
        var _len = _this.find(_param.label).length;
        var _box = $('<div></div>').css({width:_len*_param.width,height:_param.height}).html(_this.html());
        _this.html('');
        _box.appendTo(_this);
        _box.find(_param.label).css({'float':'left'}).each(function() {
            $(this).attr('data-id',$(this).index());
        });
        var _identify = $('<div></div>').addClass('slide_id').css({width:_len*22,height:12,'overflow':'hidden','position':'absolute'}).appendTo(_this);
		for (var i = 0; i < _len; i++) {
			var _span = $('<span></span>').css({'background-color': '#B5B5B5','border-radius': '50%','cursor': 'pointer','display': 'inline-block','float': 'left','margin-right': '10px','z-index': '999999',width: 12,height: 12}).appendTo(_identify);
			if (i == 0) _span.css('background-color', '#C80002')
		}
        var _timeId = 0;
        var _lock = true;
		_identify.css({top: _this.offset().top+_param.height-22,left: _this.offset().left+_param.width-_identify.width()-22})
        if (_param.autoPlay) {
            _timeId = setTimeout(function() { _box.glide(); },_param.playTime);
        }
        if (_param.hover) {
            _this.hover(function(){_lock = false; clearTimeout(_timeId);},function(){
                _lock = true;
                clearTimeout(_timeId);
                _timeId = setTimeout(function() { _box.glide(); },_param.playTime);
            });
        }
        _this.find('.slide_id span').live('click',function() {
            _lock = true;_box.glide($(this).index());
        });
        $.fn.glide=(function(_index) {
            if(!_lock) return false;
            if(typeof(_index) != 'undefined'){
                var _last = _box.find(_param.label).eq(_len-1);
                _box.find(_param.label).each(function() {
                    if ($(this).index() > 0) {
                        if($(this).attr('data-id') == _index) return false;
                        $(this).clone(true).css('margin-left','0').appendTo(_box);
                        $(this).remove();
                    }
                });
            }
            _box.find(_param.label).eq(0).animate({'margin-left':'-'+_param.width+'px'},_param.animaTime,function() {
                if (typeof(_index) != 'undefined') _last.after($(this).clone(true).css('margin-left','0'));
                else $(this).clone(true).css('margin-left','0').appendTo(_box);
                $(this).remove();
                _this.find('.slide_id span').css('background-color', '#B5B5B5').eq(_box.find(_param.label).eq(0).attr('data-id')).css('background-color', '#C80002');
                if (typeof(_index) == 'undefined') _timeId = setTimeout(function() { _this.glide(); },_param.playTime);
            });
        });
    });
})(jQuery);

使用之前，先加载jquery库