无缝轮播图的例子

Posted 2020-08-22 杰子@

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝轮播图的例子相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>
</head>
<body>
<div id="box">
<ul>
<li><img src="img2/1.jpg" /></li>
<li><img src="img2/2.jpg" /></li>
<li><img src="img2/3.jpg" /></li>
<li><img src="img2/4.jpg" /></li>
<li><img src="img2/5.jpg" /></li>
<li><img src="img2/6.jpg" /></li>
</ul>
<div>
<h3></h3>
<p></p>
</div>
</div>
<script src="js/move.js"></script>
<script src="js/lunbo.js"></script>
</body>
</html>

其中：①<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>是引入了外入样式表lunbo.css，代码如下：

* {
margin:0;
padding:0;
}

#box {
width: 730px;
height: 454px;
margin: 30px auto;
position: relative;
overflow: hidden;
}

#box ul {
position: absolute;
left: 0;
}

#box li {
list-style: none;
float: left;
}

#box div {
height: 70px;
width: 100%;
background: rgba(0,0,0,0.6);
position: absolute;
bottom: 0;
font-family: "微软雅黑";
color: #fff;
text-indent: 20px;
}

#box div h3 {
line-height: 40px;
}

有的人会觉得引入外部样式表麻烦，但工作中样式通常都是会通过外部样式表引入，但平时练习的话，可以直接把样式放到style标签内即可。

②　<script src="js/move.js"></script> // 运动框架,这个在网上可以搜到很多运动框架，主要是要学会如何用
　　<script src="js/lunbo.js"></script> // 轮播图的js

代码如下：lunbo.js

/* 获取元素 */

var ul = document.querySelector("ul");
var div = document.querySelector("#box div");
var n = 0; // 用来存储图片走的个数
var timer; // 用来存放定时器

var textAttr = [
{"title":‘盛惠而来‘,"content":‘京东携手天天果园百万车厘子，29元包邮畅想‘},
{"title":‘荣耀7‘,"content":‘有点不同，0元预约，免费抽奖1999元‘},
{"title":‘老板购物节‘,"content":‘2015我要更省，老板XX购物节精彩来袭‘},
{"title":‘送钱送美酒‘,"content":‘大盘让我心碎，我在京东买醉送钱送美酒‘},
{"title":‘玩转暑假‘,"content":‘追风少年，联想拯救者全国独家抢购‘},
{"title":‘游园门票‘,"content":‘奔跑吧周末游游园门票一元秒杀‘}
];

// 把ul内容复制一份
ul.innerHTML += ul.innerHTML;

// 把所有li都排着一行
var lis = document.querySelectorAll("li");

// 一个li的宽度
var w = parseFloat(getComputedStyle(lis[0]).width);

// ul的宽度
ul.style.width = w*lis.length + ‘px‘;

// 把文字添加到图片上
div.innerHTML = ‘<h3>‘+ textAttr[0].title +‘</h3>‘+‘<p>‘+ textAttr[0].content +‘</p>‘;

// 开启一个定时器，让图片不断的走
timer = setInterval(pic,3000);

function pic(){
n++; // 调一次函数表示图片已经走了一张，就让它的值加个1

// 让文字先运到下面
move(div,{bottom:-70},500,‘linear‘,function(){
// 当文字已经运动消失了，这个时候该运动ul
move(ul,{left:-730*n},1000,‘linear‘,function(){
// 当图片停止了，需要去判断这张图是不是复制那个的第一张，如果是，就把ul拉回来

if( n == lis.length/2 ){
//当条件成立的时候说明，现在是复制那个第一张已经走完了，要让ul回到0
ul.style.left = 0;
n = 0; //需要让n的值不再累加了，让它与图片对上号
}

//在文字上去之前应该把内容改了
div.innerHTML = ‘<h3>‘+ textAttr[n].title +‘</h3>‘+‘<p>‘+ textAttr[n].content +‘</p>‘;

//当ul走完了一个，这个时候需要让文字块移动上去
move(div,{bottom:0},500,‘linear‘);
});
});
}

③move.js代码如下：

/*
* 调用：
*
* move(obj, {left:10,top:20,opacity:0.8}, duration, fx, callback)
*
* 第二个参数里用键值对的形式，值没有单位，opacity的值为0-1
*
*/

function move(obj, attrs, duration, fx, callback) {

clearInterval(obj.timer);

var startTime = new Date().getTime();
var j = {};
for (var attr in attrs) {
j[attr] = {}
j[attr].b = parseFloat(getComputedStyle(obj)[attr]);
j[attr].c = attrs[attr] - j[attr].b;
}

var d = duration;
obj.timer = setInterval(function() {
var t = new Date().getTime() - startTime;

if ( t >= d ) {
t = d;
}

for (var attr in attrs) {
var b = j[attr].b;
var c = j[attr].c;
var value = Tween[fx](t, b, c, d);
if ( attr == ‘opacity‘ ) {
obj.style[attr] = value;
} else {
obj.style[attr] = value + ‘px‘;
}
}

if ( t == d ) {
clearInterval(obj.timer);
if (typeof callback == ‘function‘) {
callback.call(obj);
}
}
}, 16);
}

/*
* t : time 已过时间
* b : begin 起始值
* c : count 总的运动值
* d : duration 持续时间
* */

//Tween.linear();

以上是关于无缝轮播图的例子的主要内容，如果未能解决你的问题，请参考以下文章