简单轮播，后续更新

时间：2018-06-13 21:42:57 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：radius attr fse line utf-8 ntc 透明 UI dde

<!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>Document</title>

<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
img {
display: block;
}
a {
text-decoration: none;
color: #fff;
}
.qf-banner {
position: relative;
width: 670px;
height: 240px;
margin: 0 auto;
overflow: hidden;
}
.banner-inner {
position: absolute;
left: 0;
top: 0;
width: 9999px;
height: 240px;
}
.banner-inner img {
float: left;
}
.banner-tip {
position: absolute;
bottom: 10px;
right: 10px;
}
.banner-tip li {
display: inline-block;
width: 14px;
height: 14px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
opacity: 0.4;
}
.banner-tip li.active {
opacity: 1;
}
.left-btn, .right-btn {
position: absolute;
top: 50%;
margin-top: -23px;
width: 35px;
height: 46px;
background-image: url(../images/pre.png);
}
.left-btn {
left: 25px;
}
.right-btn {
right: 25px;
background-position: -45px, 0;
}
</style>
</head>
<body>
<div class="qf-banner">
<div class="banner-inner">
<img src="images/1.jpg" >
<img src="images/2.jpg" >
<img src="images/3.jpg" >
<img src="images/4.jpg" >
<img src="images/5.jpg" >
<img src="images/6.jpg" >
</div>
<ul class="banner-tip">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="left-btn"></a>
<a href="javascript:;" class="right-btn"></a>
</div>
</body>
</html>
<script type="text/javascript">

// 图片整体
var bannerbox=document.querySelector(".banner-inner");

// 窗口
var qfbanner=document.querySelector(".qf-banner");

// 窗口宽度（每张图片宽度）
var n=qfbanner.offsetWidth;

// 计时器
var timer=null;

// 修改样式，把最后一张换到前面，由1234-到4123，注意left值，还是以第2张图片位置显示
function styleRevice(){
bannerbox.insertBefore(bannerbox.lastElementChild,bannerbox.firstElementChild);
bannerbox.style.left=-n+"px";
}
styleRevice()

// left运动左边一个距离，前一张图片位置换到最后一张，由4123-到1234-到2341-到3412.。。，图片以第2张图片位置显示
function banleft(){
sportFn(bannerbox,"left",-2*n,1000,function(ele){
ele.appendChild(ele.firstElementChild);
ele.style.left=-n+"px";
})
}

// 同理left运动右边一个距离，最后一张图片换到第一张，由4123-到3412-到2341-到1234.。。，图片以第2张图片位置显示
function banright(){
sportFn(bannerbox,"left",0,1000,function(ele){
ele.insertBefore(ele.lastElementChild,ele.firstElementChild);
ele.style.left=-n+"px";
})
}

// 每张图片显示的时间，附带轮播
function autoplay(callback){
clearInterval(timer);
timer=setInterval(function(){
callback();
},2000)
}

// 向左轮播
autoplay(banleft);

// 左右点击按钮
var leftbtn=document.querySelector(".left-btn")
var rightbtn=document.querySelector(".right-btn")

leftbtn.onclick=function(){

banleft();

// 以后每次按照这轨迹
autoplay(banleft)
}

rightbtn.onclick=function(){

banright();

autoplay(banright);
}

// 行间样式
function getstyle(ele,attr){
return ele.currentStyle?ele.currentStyle([attr]):getComputedStyle(ele,false)[attr];
}

// 一般属性
function sportFn(ele,attr,target,time,callback){
var init=parseFloat(getstyle(ele,attr));
var speed=target>init?10:-10;
if(target==init){
return;
}
var _time=time/((target-init)/speed);
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var _init=parseFloat(getstyle(ele,attr));
if((target>init&&_init+speed>target)||(target<init&&_init+speed<target)){
clearInterval(ele.timer);
if(callback){
callback(ele);
}
}else{
ele.style[attr]=_init+speed+"px";
}

},_time)
}

// 含透明度
// function sportfn(ele,attr,target,time,callback){
// var init=parseFloat(getstyle(ele,attr));
// var speed=target>init?10:-10;
// if(target==init){
// return;
// }

// if(attr=="opacity"){
// var _time=time/((target*100-init*100)/speed)
// }else{
// _time=time/((target-init)/speed);
// }

// clearInterval(ele.timer);

// ele.timer=setInterval(function(){
// var _init=parseFloat(getstyle(ele,attr));

// if(attr=="opacity"){
// if(_init*100==target*100){
// _init=target;
// clearInterval(ele.timer);
// if(callback){
// callback(ele);
// }

// }else{
// ele.style[attr]=(_init*100+speed)/100;
// }

// }else{
// if((target>init&&_init+speed>target)||(target<init&&_init+speed<target)){
// _init=target;
// clearInterval(ele.timer);
// if(callback){
// callback(ele);
// }
// }else{
// ele.style[attr]=_init+speed+"px";
// }

// }

// },_time)
// }
</script>