html 无限循环旋转木马（垂直或水平）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 无限循环旋转木马（垂直或水平）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<meta charset='utf-8' />
<title>
infinite loop carousel(vertical)
</title>
<style>
.infinite-carousel .list{
width:200px;
height:1400px;
overflow:visible;
}
.infinite-carousel .viewport{
width:200px;
height:410px;
overflow:hidden;
}
.item{
width:200px;
height:200px;
text-align: center;
vertical-align: middle;
line-height: 200px;
float: left;
margin-bottom: 10px;
}
.r{
background-color: red;
}
.g{
background-color: #cf5;
}
.b{
background-color: blue;
}
</style>
</head>
<body>
<div class='infinite-carousel'>
<button class='pre'>pre</button>
<div class="viewport">
<div class='list'>
<div class='item g'>
1
</div>
<div class='item r'>
2
</div>
<div class='item g'>
3
</div>
<div class='item b'>
4
</div>
<div class='item r'>
5
</div>
<div class='item g'>
6
</div>
<div class='item b'>
7
</div>
</div>
</div>
<button class='next'>next</button>
</div>
<script src='infiniteCarousel.js'></script>
<script>
$('.infinite-carousel').infiniteCarousel({
itemsPerMove : 2,
duration : 500,
vertical : true
});
</script>
</body>
</html>/**
* infinite loop carousel
* @author newdongyuwei@gmail.com
* @param {Object} config
* @return {Object} this
*/
$.fn.infiniteCarousel = function(config){
config = $.extend({
itemsPerMove : 2,
duration : 1000,
vertical : false
},config);
var viewportEl = this.find('.viewport'), listEl = viewportEl.find('.list');
var first = listEl.children(":first"), last = listEl.children(":last");
var distance, prevProp, nextProp;
if(config.vertical){
distance = Math.max(first.outerHeight(true),last.outerHeight(true)) * config.itemsPerMove;
prevProp = { 'scrollTop' : "-=" + distance };
nextProp = { 'scrollTop' : distance };
}else{
distance = Math.max(first.outerWidth(true),last.outerWidth(true)) * config.itemsPerMove;
prevProp = { 'scrollLeft' : "-=" + distance };
nextProp = { 'scrollLeft' : '+=' + distance };
}
function move(config) {
if (config.dir === 'next') {
viewportEl.stop().animate(nextProp,{
duration : config.duration,
complete : function() {
config.vertical ? viewportEl.scrollTop(0) : viewportEl.scrollLeft(0);
repeatRun(function(){
listEl.children(":last").after(listEl.children(":first"));
},config.itemsPerMove);
}
});
}
if (config.dir === 'pre') {
for(var i = 0; i < config.itemsPerMove; i++){
listEl.prepend(listEl.children(":last"));
}
viewportEl[config.vertical ? 'scrollTop' : 'scrollLeft'](distance)
.stop().animate(prevProp, {
duration : config.duration
});
}
}
function repeatRun(func,times){
for(var i = 0; i < times; i++){
func();
}
}
this.find('.pre').click(function() {
move($.extend(config,{
dir: "pre"
}));
});
this.find('.next').click(function() {
move($.extend(config,{
dir: "next"
}));
});
return this;
};<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<meta charset='utf-8' />
<title>
infinite loop carousel(horizontal)
</title>
<style>
.infinite-carousel .list{
width:1400px;
height:200px;
overflow:visible;
}
.infinite-carousel .viewport{
width:410px;
height:200px;
overflow:hidden;
}
.item{
width:200px;
height:200px;
text-align: center;
vertical-align: middle;
line-height: 200px;
margin-right:10px;
float: left;
/*display: inline-block;*/
}
.r{
background-color: red;
}
.g{
background-color: #cf5;
}
.b{
background-color: blue;
}
</style>
</head>
<body>
<div class='infinite-carousel'>
<button class='pre'>pre</button>
<div class="viewport">
<div class='list'>
<div class='item g'>
1
</div>
<div class='item r'>
2
</div>
<div class='item g'>
3
</div>
<div class='item b'>
4
</div>
<div class='item r'>
5
</div>
<div class='item g'>
6
</div>
<div class='item b'>
7
</div>
</div>
</div>
<button class='next'>next</button>
</div>
<script src='infiniteCarousel.js'></script>
<script>
$('.infinite-carousel').infiniteCarousel({
itemsPerMove : 2,
duration : 500
});
</script>
</body>
</html>以上是关于html 无限循环旋转木马（垂直或水平）的主要内容，如果未能解决你的问题，请参考以下文章