话不多说，上干货，注意外部js文件，别引用错了，外部js文件在下面会给出
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>轮播图</title>
<style>
*{
padding:0px;
margin: 0px;
list-style:none;
}
.start{
position:relative;
height: 250px;
width: 400px;
margin:100px auto 0px;
border:2px solid black;
overflow: hidden;
}
.start .start1{
height:250px;
width:2000px;
position: absolute;
left:0px;
top:0px;
}
.start .start1 li{
float:left;
height:250px;
width:400px;
}
.start .start1 li img{
width:100%;
height: 100%;
}
.start .btn {
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
color: #fff;
background-color: #000;
text-align: center;
line-height: 40px;
opacity: 0.1;
cursor: pointer;
}
.start:hover .btn {
opacity: 0.7;
}
.start .leftbtn {
left: 15px;
}
.start .rightbtn {
right: 15px;
}
.start .end {
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
}
.start .end span {
display: inline-block;
width: 15px;
height: 6px;
background-color: #ccc;
margin-right: 10px;
cursor: pointer;
}
.start .end .active {
background-color: #f40;
}
</style>
</head>
<body>
<div class="start">
<ul class="start1">
<li>
<img src="./cat1.jpg"/>
</li>
<li>
<img src="./cat2.jpg"/>
</li>
<li>
<img src="./cat3.jpg"/>
</li>
<li>
<img src="./cat4.jpg"/> **图片的话自己可以修改哈，还有位置。**
</li>
<li>
<img src="./cat1.jpg"/>
</li>
</ul>
<div class="btn leftbtn"><</div>
<div class="btn rightbtn">></div>
<div class="end">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
**这个外部引用的js文件下面会给出**
<script src='./move.js'></script>
<script>
var timer = null;
var sliderpage = document.getelementsbyclassname('start1')[0];
var movewidth = sliderpage.children[0].offsetwidth;
var num = sliderpage.children.length - 1;
var leftbtn = document.getelementsbyclassname('leftbtn')[0];
var rightbtn = document.getelementsbyclassname('rightbtn')[0];
var ospanarray = document.getelementsbyclassname('end')[0].getelementsbytagname('span');
var lock = true;
var index = 0;
leftbtn.onclick = function () {
automove('right->left');
}
rightbtn.onclick = function () {
automove('left->right');
}
**这个部分是按钮**
for (var i = 0; i < ospanarray.length; i++) {
(function (myindex) {
ospanarray[i].onclick = function () {
lock = false;
cleartimeout(timer);
index = myindex;
startmove(sliderpage, {left: - index * movewidth}, function () {
lock = true;
timer = settimeout(automove, 1500);
changeindex(index);
})
}
})(i)
}
**上面这部分是让索引可以点击跳转图片**
function automove (direction) {
**加lock是为了让你点击按钮快速的时候不出错**
if (lock) {
lock = false;
cleartimeout(timer);
**默认方向为向左**
if (!direction || direction == 'left->right') {
index++;
**startmove（）是一个外部的js文件的函数下面会给大家**
startmove(sliderpage, {left: sliderpage.offsetleft - movewidth}, function () {
if (sliderpage.offsetleft == - num * movewidth) {
index = 0;
sliderpage.style.left = '0px';
}
timer = settimeout(automove, 1500);
lock = true;
changeindex(index);
});
}else if (direction == 'right->left') {
if (sliderpage.offsetleft == 0) {
sliderpage.style.left = - num * movewidth + 'px';
index = num;
}
index--;
startmove(sliderpage, {left: sliderpage.offsetleft + movewidth}, function () {
timer = settimeout(automove, 1500);
lock = true;
changeindex(index);
})
}
}
}
**这个是让索引按第几个图片动**
function changeindex (_index) {
for (var i = 0; i < ospanarray.length; i++) {
ospanarray[i].classname = '';
}
ospanarray[_index].classname = 'active';
}
timer = settimeout(automove, 1500);
</script>
</body>
</html>
**这个是外部的js文件，是一个让图片运动的文件**
function getstyle (obj, attr) {
if (obj.currentstyle) {
return obj.currentstyle[attr];
}else {
return window.getcomputedstyle(obj, false)[attr];
}
}
// object是dom（元素），data是对象，function是函数传方法
function startmove (obj, data, func) {
clearinterval(obj.timer);
var ispeed;
var icur;
var name;
starttimer = obj.timer = setinterval(function () {
var bstop = true;
for (var attr in data) {
if (attr === 'opacity') {
name = attr;
icur = parsefloat(getstyle(obj, attr)) * 100;
}else {
icur = parseint(getstyle(obj, attr));
}
ispeed = ( data[attr] - icur) / 8;
if (ispeed > 0) {
ispeed = math.ceil(ispeed);
}else {
ispeed = math.floor(ispeed);
}
if (attr === 'opacity') {
obj.style.opacity = ( icur + ispeed ) / 100;
}else {
obj.style[attr] = icur + ispeed + 'px';
}
if ( math.floor(math.abs(data[attr] - icur)) != 0 ) {
bstop = false;
}
}
if (bstop) {
clearinterval(obj.timer);
if (name === 'opacity') {
obj.style.opacity = data[name] / 100;
}
func();
}
},30);
}
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
我要评论
网友评论