dongyuwei/carousel.html

## carousel.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <style>
        @media screen and (min-width: 768px){
            .modal-dialog {
                width: 600px;
                margin: 20px auto;
            }
        }

        .carousel-close{
            cursor: pointer;
            position: fixed;
            top: 0;
            right:10px;
            font-size: 30px;
            opacity: 0.8;
            color:#FFF;
            z-index: 10000;
            display: none;
            -webkit-user-select:none;
            user-select:none;
        }
        .carousel-close:hover{
            opacity: 1;
            color:#FFF;
            font-size: 32px;
        }
        .modal{
            background-color: rgb(38,38,38);
        }
        .modal .footer{
            position: absolute;
            bottom: 0;
            right:0;
        }
        .modal .body img{
            border-radius: 5px;
        }

        .carousel-prev,.carousel-next{
            cursor: pointer;
            position: fixed;
            bottom: 50%;
            font-size: 30px;
            color: #FFF;
            opacity: 0.6;
            z-index: 10000;
            display: none;
            -webkit-user-select:none;
            user-select:none;
        }
        .carousel-prev:hover, .carousel-next:hover{
            opacity: 1;
            font-size: 32px;
        }
        .carousel-prev{
            left : 0;

            width: 45px;
            height: 87px;
            background: url(http://s1.a.myfun.com/images/btn.arrow-2eb29ac31664ebea.png) no-repeat -140px -9px;
        }
        .carousel-next{
            right: -3px;

            width: 45px;
            height: 87px;
            background: url(http://s1.a.myfun.com/images/btn.arrow-2eb29ac31664ebea.png) no-repeat -9px -9px;
        }
    </style>
    <script>
        $(function(){
            var ArrayUtils = {
                current : null,
                init : function(list){
                    this.list = list;
                    this.current = list[0];

                    return this;
                },
                prev : function(){
                    var list = this.list, current = this.current;
                    var len = list.length, index = list.indexOf(current);
                    this.current = index === 0 ? list[len - 1] : list[index - 1];
                    return this.current;
                },
                next : function(){
                    var list = this.list, current = this.current;
                    var len = list.length, index = list.indexOf(current);
                    this.current = index === len - 1 ? list[0] : list[index + 1];
                    return this.current;
                }
            };
            //--------------------------------------------------------------------//
            var Task = {
                showImage : function(src){
                    var img = new Image();
                    img.onload = function() {
                        var height = Math.min($(window).height() - 40, this.height);
                        var width = height * this.width / this.height;

                        $('.modal .modal-dialog').css({
                            width : width,
                            height : height
                        });

                        $(img).css({
                            width : width,
                            height : height
                        });

                        $('.modal-dialog').css('margin-top', Math.abs($(window).height() - height)/2  + 'px');

                        $('.modal .body').html(img);
                    };
                    img.src = src;
                },
                run : function(){
                    $('.modal').on('shown.bs.modal',function(){
                        $('.carousel-prev').css('display','block');
                        $('.carousel-next').css('display','block');
                        $('.carousel-close').css('display','block');
                    });
                    $('.modal').on('hidden.bs.modal',function(){
                        $('.carousel-prev').css('display','none');
                        $('.carousel-next').css('display','none');
                        $('.carousel-close').css('display','none');
                    });

                    $('.modal').modal();

                    var me = this;

                    var list = [];
                    $('.imgs img').each(function(){
                        list.push(this.src);
                    });

                    var arrayUtils = ArrayUtils.init(list);
                    me.showImage(arrayUtils.current);

                    $('.carousel-prev').click(function(){
                        me.showImage(arrayUtils.prev());
                    });
                    $('.carousel-next').click(function(){
                        me.showImage(arrayUtils.next());
                    });
                    $('.carousel-close').click(function(){
                        $('.modal').modal('hide');
                    });
                    $(window).resize(function(){
                        me.showImage(arrayUtils.current);
                    });
                }
            };

            Task.run();
        });
    </script>
</head>
<body>
    <div class="imgs">
        <img class="hide" src="http://i4.au.reastatic.net/800x600/a7c75cf8a9fdf54844b58a8651036a23c11c38265af9fcf444b58ca335eb3208/image8.jpg" alt="">
        <img class="hide" src="http://i4.au.reastatic.net/678x508/1f9c9dbe871b7348124297411c166d94b6542fd143a36fe8a32781f1e46bdead/main.jpg" alt="">
        <img class="hide" src="http://i4.au.reastatic.net/800x600/1f9c9dbe871b7348124297411c166d94b6542fd143a36fe8a32781f1e46bdead/main.jpg" alt="">
        <img src="http://images49.fotki.com/v1458/photos/7/1454087/7294027/fatcattabbysketchesart-vi.jpg" alt="" class="hide">
        <img src="http://me2day.phinf.naver.net/20110519_192/hesperus_1305785703486IluS8_JPEG/hesperus_1305785703_07239.jpg" alt="" class="hide">
        <img src="http://ww4.sinaimg.cn/large/9a58f3c0jw1e1rr6ivvfvj.jpg" alt="" class="hide">
    </div>

    <i class="carousel-close" data-dismiss="modal" aria-hidden="true" title='carousel-close'>&times;</i>
    <div class="carousel-prev"></div> <!-- ❮ -->
    <div class="carousel-next"></div> <!-- ❯ -->

    <!-- Modal -->
    <div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="body">
          </div>
          <div class="footer">
            <form action="">
                <button type="button" class="btn btn-default">Save</button>
            </form>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

	<style>
	@media screen and (min-width: 768px){
	.modal-dialog {
	width: 600px;
	margin: 20px auto;
	}
	}

	.carousel-close{
	cursor: pointer;
	position: fixed;
	top: 0;
	right:10px;
	font-size: 30px;
	opacity: 0.8;
	color:#FFF;
	z-index: 10000;
	display: none;
	-webkit-user-select:none;
	user-select:none;
	}
	.carousel-close:hover{
	opacity: 1;
	color:#FFF;
	font-size: 32px;
	}
	.modal{
	background-color: rgb(38,38,38);
	}
	.modal .footer{
	position: absolute;
	bottom: 0;
	right:0;
	}
	.modal .body img{
	border-radius: 5px;
	}

	.carousel-prev,.carousel-next{
	cursor: pointer;
	position: fixed;
	bottom: 50%;
	font-size: 30px;
	color: #FFF;
	opacity: 0.6;
	z-index: 10000;
	display: none;
	-webkit-user-select:none;
	user-select:none;
	}
	.carousel-prev:hover, .carousel-next:hover{
	opacity: 1;
	font-size: 32px;
	}
	.carousel-prev{
	left : 0;

	width: 45px;
	height: 87px;
	background: url(http://s1.a.myfun.com/images/btn.arrow-2eb29ac31664ebea.png) no-repeat -140px -9px;
	}
	.carousel-next{
	right: -3px;

	width: 45px;
	height: 87px;
	background: url(http://s1.a.myfun.com/images/btn.arrow-2eb29ac31664ebea.png) no-repeat -9px -9px;
	}
	</style>
	<script>
	$(function(){
	var ArrayUtils = {
	current : null,
	init : function(list){
	this.list = list;
	this.current = list[0];

	return this;
	},
	prev : function(){
	var list = this.list, current = this.current;
	var len = list.length, index = list.indexOf(current);
	this.current = index === 0 ? list[len - 1] : list[index - 1];
	return this.current;
	},
	next : function(){
	var list = this.list, current = this.current;
	var len = list.length, index = list.indexOf(current);
	this.current = index === len - 1 ? list[0] : list[index + 1];
	return this.current;
	}
	};
	//--------------------------------------------------------------------//
	var Task = {
	showImage : function(src){
	var img = new Image();
	img.onload = function() {
	var height = Math.min($(window).height() - 40, this.height);
	var width = height * this.width / this.height;

	$('.modal .modal-dialog').css({
	width : width,
	height : height
	});

	$(img).css({
	width : width,
	height : height
	});

	$('.modal-dialog').css('margin-top', Math.abs($(window).height() - height)/2 + 'px');

	$('.modal .body').html(img);
	};
	img.src = src;
	},
	run : function(){
	$('.modal').on('shown.bs.modal',function(){
	$('.carousel-prev').css('display','block');
	$('.carousel-next').css('display','block');
	$('.carousel-close').css('display','block');
	});
	$('.modal').on('hidden.bs.modal',function(){
	$('.carousel-prev').css('display','none');
	$('.carousel-next').css('display','none');
	$('.carousel-close').css('display','none');
	});

	$('.modal').modal();

	var me = this;

	var list = [];
	$('.imgs img').each(function(){
	list.push(this.src);
	});

	var arrayUtils = ArrayUtils.init(list);
	me.showImage(arrayUtils.current);

	$('.carousel-prev').click(function(){
	me.showImage(arrayUtils.prev());
	});
	$('.carousel-next').click(function(){
	me.showImage(arrayUtils.next());
	});
	$('.carousel-close').click(function(){
	$('.modal').modal('hide');
	});
	$(window).resize(function(){
	me.showImage(arrayUtils.current);
	});
	}
	};

	Task.run();
	});
	</script>
	</head>
	<body>
	<div class="imgs">
	<img class="hide" src="http://i4.au.reastatic.net/800x600/a7c75cf8a9fdf54844b58a8651036a23c11c38265af9fcf444b58ca335eb3208/image8.jpg" alt="">
	<img class="hide" src="http://i4.au.reastatic.net/678x508/1f9c9dbe871b7348124297411c166d94b6542fd143a36fe8a32781f1e46bdead/main.jpg" alt="">
	<img class="hide" src="http://i4.au.reastatic.net/800x600/1f9c9dbe871b7348124297411c166d94b6542fd143a36fe8a32781f1e46bdead/main.jpg" alt="">
	<img src="http://images49.fotki.com/v1458/photos/7/1454087/7294027/fatcattabbysketchesart-vi.jpg" alt="" class="hide">
	<img src="http://me2day.phinf.naver.net/20110519_192/hesperus_1305785703486IluS8_JPEG/hesperus_1305785703_07239.jpg" alt="" class="hide">
	<img src="http://ww4.sinaimg.cn/large/9a58f3c0jw1e1rr6ivvfvj.jpg" alt="" class="hide">
	</div>

	<i class="carousel-close" data-dismiss="modal" aria-hidden="true" title='carousel-close'>×</i>
	<div class="carousel-prev"></div> <!-- ❮ -->
	<div class="carousel-next"></div> <!-- ❯ -->

	<!-- Modal -->
	<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="body">
	</div>
	<div class="footer">
	<form action="">
	<button type="button" class="btn btn-default">Save</button>
	</form>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>