各个方向的轮播图 ：
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>上下左右无缝滚动jQuery插件</title>
<meta name="keywords" content="上下左右,无缝滚动,jQuery插件" />
<meta name="description" content="上下左右无缝滚动jQuery插件下载。实现上下左右自动滚动、无缝滚动。" />
<meta name="author" content="js代码(www.jsdaima.com)" />
<meta name="copyright" content="js代码(www.jsdaima.com)" />
<!-- <script type="text/javascript" src="/static/js/protect.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- <link rel="stylesheet" href="css/demo.css" /> -->
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<div class="container">
<p>左右滚动</p>
<div class="roll-wrap roll_row" id="a">
<ul class="roll__list" style="position: absolute; left: 0; top: 0;">
<li>1</li>
<li style="width: 200px;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<!--<li>9</li>
<li>10</li>
<li>11</li>-->
</ul>
<a class="control pre" href="javascript:;"><</a>
<a class="control next" href="javascript:;">></a>
</div>
<p>左右自动滚动</p>
<div class="roll-wrap roll_row" id="b">
<ul class="roll__list" style="position: absolute; left: 0; top: 0;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
<a class="control pre" href="javascript:;"><</a>
<a class="control next" href="javascript:;">></a>
</div>
<p>上下滚动</p>
<div class="roll-wrap roll_col" id="c">
<ul class="roll__list" style="position: absolute; left: 0; top: 0;">
<li class="li-1">1</li>
<li class="li-2">2</li>
<li class="li-3">3</li>
<li class="li-4">4</li>
</ul>
<a class="control pre" href="javascript:;"><</a>
<a class="control next" href="javascript:;">></a>
</div>
<p>上下自动滚动</p>
<div class="roll-wrap roll_col h600" id="d">
<ul class="roll__list" style="position: absolute; left: 0; top: 0;">
<li class="li-1">1</li>
<li class="li-2">2</li>
<li class="li-3">3</li>
<li class="li-4">4</li>
<li class="li-1">5</li>
<li class="li-2">6</li>
<li class="li-3">7</li>
<li class="li-4">8</li>
<li class="li-2">9</li>
</ul>
<a class="control pre" href="javascript:;"><</a>
<a class="control next" href="javascript:;">></a>
</div>
<p>不间断向左滚动</p>
<div class="roll-wrap roll_row" id="e">
<ul class="roll__list" style="position: absolute; left: 0; top: 0;">
<li>1</li>
<li style="width: 200px;">2</li>
<li>3</li>
<li style="width: 400px;">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<p>不间断向右滚动</p>
<div class="roll-wrap roll_row" id="f">
<ul class="roll__list" style="position: absolute; right: 0; top: 0; width: 1480px">
<li>1</li>
<li style="width: 200px;">2</li>
<li>3</li>
<li style="width: 400px;">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<p>不间断向上滚动</p>
<div class="roll-wrap roll_col" id="g">
<ul class="roll__list" style="position: absolute; left: 0; top: 0;">
<li class="li-1">1</li>
<li class="li-2">2</li>
<li class="li-3">3</li>
<li class="li-4">4</li>
</ul>
</div>
<p>不间断向下滚动</p>
<div class="roll-wrap roll_col" id="h">
<ul class="roll__list" style="position: absolute; left: 0; bottom: 0;">
<li class="li-1">1</li>
<li class="li-2">2</li>
<li class="li-3">3</li>
<li class="li-4">4</li>
</ul>
</div>
</div>
<script src="rollslide.js"></script>
<script>
$('#a').rollSlide({
orientation: 'left',
num: 1,
v: 1000,
space: 3000,
isRoll: false
});
$('#b').rollSlide({
orientation: 'right',
num: 2,
v: 1500,
space: 3000,
isRoll: true
});
$('#c').rollSlide({
orientation: 'top',
num: 1,
v: 1500,
//space: 500,
isRoll: true
});
$('#d').rollSlide({
orientation: 'bottom',
num: 3,
v: 1500,
space: 1000,
isRoll: true
});
$('#e').rollNoInterval().left();
$('#f').rollNoInterval().right();
$('#g').rollNoInterval().top();
$('#h').rollNoInterval().bottom();
</script>
</body>
</html>
css
* {
font-family: 'Microsoft Yahei';
}
body,
ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
p {
margin-top: 40px;
}
.container {
margin: 0 auto;
width: 940px;
}
.roll-wrap:hover .control {
display: block;
}
.roll-wrap {
position: relative;
width: 100%;
height: 100px;
overflow: hidden;
}
.roll-wrap .roll__list {}
.roll_row .roll__list::before,
.roll_row .roll__list::after {
content: "";
display: table;
line-height: 0;
}
.roll_row .roll__list::after {
clear: both;
}
.roll_row .roll__list {
width: 9999px;
}
.roll_row .roll__list li {
float: left;
display: block;
margin-right: 20px;
width: 100px;
height: 100px;
line-height: 100px;
font-weight: bold;
font-size: 30px;
text-align: center;
color: #fff;
background-color: #ff9900;
}
.control {
position: absolute;
top: 30px;
display: none;
padding: 10px 5px;
font-weight: bold;
text-decoration: none;
color: #fff;
background-color: rgba(0, 0, 0, .3);
}
.control:hover {
background-color: rgba(0, 0, 0, .5);
}
.control.pre {
left: 5px;
}
.control.next {
right: 5px;
}
.roll_col {
width: 100%;
height: 200px;
overflow: hidden;
}
.roll_col .roll__list {
width: 100%;
}
.h600 {
height: 600px;
}
.roll_col li {
display: block;
height: 200px;
line-height: 200px;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #fff;
background-color: #ff9900;
}
.roll_col .li-2 {
background-color: #0099ff;
}
.roll_col .li-3 {
background-color: #ff0099;
}
.roll_col .li-4 {
background-color: #00ff99;
}
.roll_col .control {
top: 80px;
}
index.js
let requests = require('requests');
let fs = require('fs') //fs模块
let path = require('path') //path模块
requests('https://www.jsdaima.com/Uploads/js/201803/1522376449/js/rollslide.js')
// 1. https://www.jsdaima.com/js/demo/1358.html // 爬取首页
// 2. https://www.jsdaima.com/Uploads/js/201803/1522376449/css/demo.css //爬取css
// 3. https://www.jsdaima.com/Uploads/js/201803/1522376449/js/rollslide.js //爬取js
.on('data', function(chunk) {
console.log(chunk)
fs.writeFile(path.resolve(__dirname, 'rollslide.js'), chunk, () => {
// 1.path.resolve(__dirname, 'index.html') // 爬取首页
// 2.path.resolve(__dirname, 'demo.css') //爬取css
// 3.path.resolve(__dirname, 'rollslide.js') //爬取js
console.log('保存成功');
})
})
/*
爬取成功后把路径改成同级目录，即可打开
index.html
<link rel="stylesheet" href="css/demo.css" /> //原来
<link rel="stylesheet" href="demo.css" /> //现在
<script src="js/rollslide.js"></script> //原来
<script src="rollslide.js"></script> //现在
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> //引入jQuery
*/
rollslide.js
/**
* Created by f on 2015/5/8.
*/
(function($) {
$.fn.rollSlide = function(obj) {
var $self = this,
orientation = obj.orientation || 'left', //滚动方式
num = obj.num || 1, //滚动数量
v = (typeof obj.v === 'number') ? obj.v : 0, //滚动速度
minTime = (typeof obj.space === 'number') ? ((obj.space >= 100) ? obj.space : 100) : 100, //最小间隔为 100 ms ，
space = minTime + v || 5000 + v, //滚动间隔 默认 5000ms
isRoll = obj.isRoll, //自动播放
isStart = true,
roll = function(ori, n, v) {
var $ul = $self.find('.roll__list'),
$item = $ul.find('li'),
range = 0,
i, len = $item.length,
sliceItem = [],
cloneSliceItem = [],
startTime = (new Date()).getTime(),
//存放滚动过的 item
memory = function() {
var arr = [];
if (ori === 'left' || ori === 'top') {
for (i = 0; i < n; i++) {
range += ori === 'left' ? $($item[i]).outerWidth(true) : $($item[i]).outerHeight(true); // left 取 width，top 取 height
arr.push($item[i]);
}
} else if (ori === 'right' || ori === 'bottom') {
for (i = len - n; n > 0; n--, i++) {
range += ori === 'right' ? $($item[i]).outerWidth(true) : $($item[i]).outerHeight(true);
arr.push($item[i]);
}
}
return arr;
};
isStart = false; //关闭滚动
sliceItem = memory();
cloneSliceItem = $(sliceItem).clone();
//判断往哪个方向移动
switch (ori) {
case 'left':
$ul.append(cloneSliceItem);
$ul.animate({
'left': -range + 'px'
}, v, function() {
$(this).css({ 'left': 0 });
$(sliceItem).remove();
isStart = true; //开启滚动
});
break;
case 'right':
$ul.prepend(cloneSliceItem);
$ul.css('left', -range + 'px');
$ul.animate({
'left': 0
}, v, function() {
$(sliceItem).remove();
isStart = true; //开启滚动
});
break;
case 'top':
$ul.append(cloneSliceItem);
$ul.animate({
'top': -range + 'px'
}, v, function() {
$(this).css({ 'top': 0 });
$(sliceItem).remove();
isStart = true; //开启滚动
});
break;
case 'bottom':
$ul.prepend(cloneSliceItem);
$ul.css('top', -range + 'px');
$ul.animate({
'top': 0
}, v, function() {
$(sliceItem).remove();
isStart = true; //开启滚动
});
break;
}
},
init = function() {
var $ul = $self.find('.roll__list'),
$item = $ul.find('li'),
len = $item.length,
timer;
num = num <= len ? num : len; //滚动个数超过列表数，取列表数
if (len > 1) {
$self.on('click', '.pre', function() {
if (isStart) {
//横向滚动
if (orientation === 'left' || orientation === 'right') {
roll('right', num, v);
} else { //纵向滚动
roll('bottom', num, v);
}
}
}).
on('click', '.next', function() {
if (isStart) {
//横向滚动
if (orientation === 'left' || orientation === 'right') {
roll('left', num, v);
} else { //纵向滚动
roll('top', num, v);
}
}
}).
hover(function() {
clearInterval(timer);
}, function() {
if (isRoll) {
timer = setInterval(function() {
roll(orientation, num, v);
}, space);
}
}).
trigger('mouseout');
}
};
init();
};
$.fn.rollNoInterval = function() {
var $self = this,
$ul = $self.find('.roll__list'),
$item = $ul.find('li'),
len = $item.length,
timer,
left = function() {
var offset, i,
range,
$sliceItem;
$sliceItem = $($item[0]);
range = $sliceItem.outerWidth(true);
timer = setInterval(function() {
offset = $ul.css('left');
offset = parseInt(offset);
if (offset > -range) {
i = offset - 1;
$ul.css('left', i + 'px');
offset = $ul.css('left');
} else {
$sliceItem.detach();
$ul.css('left', 0);
$ul.append($sliceItem);
$sliceItem = $($ul.find('li')[0]);
range = $sliceItem.outerWidth(true);
}
}, 50);
},
right = function() {
var offset, i,
range,
$sliceItem;
$sliceItem = $($item[len - 1]);
range = $sliceItem.outerWidth(true);
timer = setInterval(function() {
offset = $ul.css('right');
offset = parseInt(offset);
if (offset > -range) {
i = offset - 1;
$ul.css('right', i + 'px');
offset = $ul.css('right');
} else {
$sliceItem.detach();
$ul.css('right', 0);
$ul.prepend($sliceItem);
$sliceItem = $($ul.find('li')[len - 1]);
range = $sliceItem.outerWidth(true);
}
}, 50);
},
top = function() {
var offset, i,
range,
$sliceItem;
$sliceItem = $($item[0]);
range = $sliceItem.outerHeight(true);
timer = setInterval(function() {
offset = $ul.css('top');
offset = parseInt(offset);
if (offset > -range) {
i = offset - 1;
$ul.css('top', i + 'px');
offset = $ul.css('top');
} else {
$sliceItem.detach();
$ul.css('top', 0);
$ul.append($sliceItem);
$sliceItem = $($ul.find('li')[0]);
range = $sliceItem.outerHeight(true);
}
}, 50);
},
bottom = function() {
var offset, i,
range,
$sliceItem;
$sliceItem = $($item[len - 1]);
range = $sliceItem.outerHeight(true);
timer = setInterval(function() {
offset = $ul.css('bottom');
offset = parseInt(offset);
if (offset > -range) {
i = offset - 1;
$ul.css('bottom', i + 'px');
offset = $ul.css('bottom');
} else {
$sliceItem.detach();
$ul.css('bottom', 0);
$ul.prepend($sliceItem);
$sliceItem = $($ul.find('li')[len - 1]);
range = $sliceItem.outerHeight(true);
}
}, 50);
},
init = function() {
$self.hover(function() {
clearInterval(timer);
}, function() {
});
};
//init();
return {
left: left,
right: right,
top: top,
bottom: bottom
}
}
})(jQuery);
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
