旋转轮播
CSS部分
@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}
html部分
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li>
<a href="#"><img src="images/slidepic1.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/slidepic2.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/slidepic3.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/slidepic4.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/slidepic5.jpg" alt="" /></a>
</li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
JSON数据
var jsonData = [{ // 2
width: 600,
top: 70,
left: 0,
opacity: .80,
zIndex: 3
}, { // 3
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
}, { // 4
width: 600,
top: 70,
left: 600,
opacity: .80,
zIndex: 3
}, { //5
width: 400,
top: 20,
left: 750,
opacity: .20,
zIndex: 2
}, {
// 1
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
}];
缓冲动画JS插件
class Utils {
static getStyle(obj, attr) {
if (obj.currentStyle) {//ie 6 7 8
return obj.currentStyle[attr];
}
//google , null可以 :before,:after
return window.getComputedStyle(obj, null)[attr];
}
//获取不可见区域的高度
static getScroll() {
//ie9+
if (window.pageXOffset != undefined) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
} else if (document.compatMode === "CSS1Compat") {
//带有DTD 准备文档声明
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
//缓冲动画
static animate(oEle, json, callback) {
//新的位置=当前位置+步长 ( 目标-当前)/10;
clearInterval(oEle.timer);
oEle.timer = setInterval(() => {
let flag = true;//希望动画完成
for (let attr in json) {
let target = 0;//目标值
let current = 0;//当前值
if (Object.is(attr, "opacity")) {
target = parseFloat(json[attr]) * 100;
current = parseFloat(Utils.getStyle(oEle, attr)) * 100;
} else {
target = parseInt(json[attr]);
current = parseInt(Utils.getStyle(oEle, attr));
}
//步长
let steps = (target - current) / 10;
//取整
steps = steps >= 0 ? Math.ceil(steps) : Math.floor(steps);
//新的位置=当前位置+步长 (zIndex, opacity,不同的情况带单位)
if (attr === "opacity") { //源头放大了100被,现在就缩小100
oEle.style[attr] = (current + steps) / 100;
//装x,兼容ie
oEle.style.filter = "alpha(opacity=" + (current + steps) + ")";
} else if (attr === "zIndex") {
//直接到目标值位置,不需要参与动画
oEle.style.zIndex = target;
} else {
oEle.style[attr] = (current + steps) + 'px';
}
if (target != current) {
flag = false;
}
}
if (flag) {
clearInterval(oEle.timer);
if (typeof (callback) == "function") {
callback();
}
console.log("over");
}
}, 30)
}
}
JS实现
class Swiper{
constructor(settings={}){
this.el=document.querySelector(settings.el);
this.oArr=this.el.children[0].children[1];
this.oLis=this.el.children[0].children[0].children;
this.render();
this.mouseHandler();
this.clickHandler();
// 加个标志位
this.flag=true;
this.autoPlay();
}
// 渲染
render(fn){
Array.from(this.oLis).forEach((item,index)=>{
Utils.animate(item,jsonData[index],()=>{
if(typeof(fn)=="function"){
fn();
}
});
})
}
mouseHandler(){
// 移入显示
this.el.addEventListener("mouseenter",()=>{
Utils.animate(this.oArr,{opacity:1});
clearInterval(this.timer)
})
this.el.addEventListener("mouseleave",()=>{
Utils.animate(this.oArr,{opacity:0});
this.autoPlay();
})
}
// click点击事件
clickHandler(){
this.el.addEventListener("click",(evt)=>{
let e=evt||window.event;
let ele=e.target||e.srcElement;
if(ele.nodeName=="A"&&ele.className=="prev"){
if(this.flag){
this.flag=false;
jsonData.unshift(jsonData.pop());
this.render(()=>{
this.flag=true;
})
}
}
if(ele.nodeName=="A"&&ele.className=="next"){
if(this.flag){
this.flag=false;
jsonData.push(jsonData.shift());
this.render(()=>{
this.flag=true;
})
}
}
})
}
//自动播放
autoPlay(){
this.timer=setInterval(()=>{
jsonData.unshift(jsonData.pop());
this.render();
},1500)
}
}
// new
new Swiper({
el:"#wrap"
})
实现效果图展示
image.png
JS实现思路
1.功能需求分析
JSON传入的数据需要通过遍历进行渲染,通过缓冲动画将格式写入
通过缓冲动画库插件的遍历,将JSON传进第二个参数
Array.from(this.oLis).forEach((item,index)=>{
Utils.animate(item,jsonData[index],()=>{
if(typeof(fn)=="function"){
fn();
}
});
})
2,鼠标移入箭头的显示和隐藏
this.el.addEventListener("mouseenter",()=>{
Utils.animate(this.oArr,{opacity:1});
clearInterval(this.timer)
})
this.el.addEventListener("mouseleave",()=>{
Utils.animate(this.oArr,{opacity:0});
this.autoPlay();
})
3.自动轮播事件,通过控制json数据的删除和添加达到动态切换的效果
this.timer=setInterval(()=>{
jsonData.unshift(jsonData.pop());
this.render();
},1500)
4.点击事件以及截流防抖实现
this.el.addEventListener("click",(evt)=>{
let e=evt||window.event;
let ele=e.target||e.srcElement;
if(ele.nodeName=="A"&&ele.className=="prev"){
if(this.flag){
this.flag=false;
jsonData.unshift(jsonData.pop());
this.render(()=>{
this.flag=true;
})
}
}
if(ele.nodeName=="A"&&ele.className=="next"){
if(this.flag){
this.flag=false;
jsonData.push(jsonData.shift());
this.render(()=>{
this.flag=true;
})
}
}
})