您的位置：首页 > Web前端 > JavaScript

原生js实现旋转轮播图(包括缓动框架封装)

2019-04-16 16:21 369 查看

效果展示

代码展示

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: 10px 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以及javascript部分

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>

</head>
<body>

<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>

<script>
var arr = [
{   //  1
width:400,
top:70,
left:50,
opacity:20,
zIndex:2
},
{  // 2
width:600,
top:120,
left:0,
opacity:80,
zIndex:3
},
{   // 3
width:800,
top:100,
left:200,
opacity:100,
zIndex:4
},
{  // 4
width:600,
top:120,
left:600,
opacity:80,
zIndex:3
},
{   //5
width:400,
top:70,
left:750,
opacity:20,
zIndex:2
}
];

//        黄健

var liArr=document.getElementsByTagName("li");

run();

var wrap=document.getElementById("wrap");
var arrow=document.getElementById("arrow");
var btns=arrow.children;
wrap.function(){
animate(arrow,{"opacity":100})
}
wrap.function(){
animate(arrow,{"opacity":0})
}
console.log(btns);
var boo=true;
btns[0].function(){
if(boo){
arr.push(arr.shift());
boo=false;
run(function(){
boo=true
})
}
}
btns[1].function(){
if(boo){
arr.unshift(arr.pop());
boo=false;
run(function(){
boo=true
})
}
}

function run(callback){
for(var i=0;i<liArr.length;i++){
animate(liArr[i],arr[i],callback)
}
}

//        封装获取外链样式
function getStyle(ele,attr){
if(ele.currentStyle!=undefined){
return ele.currentStyle[attr];
}else{
return window.getComputedStyle(ele,null)[attr];
}
}
//        封装多个缓动框架
function animate(ele,json,callback){
clearInterval(ele.timer);
var step;
var nowState;
var boo;
ele.timer=setInterval(function(){
boo=true;
for(var k in json){
if(k=="opacity"){
nowState=getStyle(ele,k)*100 || 0;
}else{
nowState=parseInt(getStyle(ele,k)) || 0;
}
step=(json[k]-nowState)/10;
step=step>0?Math.ceil(step):Math.floor(step);
nowState=step+nowState;
if(k=="opacity"){
ele.style[k]=nowState/100;
}else if(k=="zIndex" || k=="z-index"){
ele.style[k]=nowState;
}else{
ele.style[k]=nowState+"px";
}
if(Math.abs(json[k]-nowState)>Math.abs(step)){
boo=false
}
}
if(boo){
clearInterval(ele.timer);
for(k in json){
if(k=="opacity"){
ele.style[k]=json[k]/100;
}else if(k=="zIndex" || k=="z-index"){
ele.style[k]=json[k];
}else{
ele.style[k]=json[k]+"px";
}
}
if(typeof callback=="function"){
callback();
}
}

},25)
}
</script>
</body>
</html>

附件下载

图片不重要,请自己找图片
转载请注明出处,谢谢

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航