js实现旋转木马轮播图
程序员文章站
2022-03-25 15:49:48
本文实例为大家分享了js实现旋转木马轮播图的具体代码，供大家参考，具体内容如下
整个页面的文件结构如下图所示：
html部分代码：
本文实例为大家分享了js实现旋转木马轮播图的具体代码，供大家参考，具体内容如下
整个页面的文件结构如下图所示：
html部分代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/mystyle.css" rel="external nofollow" />
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</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" id="arrleft"></a>
<a href="javascript:;" class="next" id="arrright"></a>
</div>
</div>
</div>
</body>
</html>
在html部分引入的mystyle.css文件部分代码
@charset "utf-8";
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部分引入的animate.js文件部分代码
/**
* created by renpingsheng on 2018/4/6.
*/
function animate(obj,json,fn) {
clearinterval(obj.timer);
obj.timer = setinterval(function () {
var flag = true;
for(var k in json){
if( k == "opacity"){
var leader = getstyle(obj,k) * 100;
var target = json[k] * 100;
var step = (target - leader) /10;
step = step > 0 ? math.ceil(step) : math.floor(step);
leader = leader + step;
obj.style[k] = leader /100;
} else if ( k == "zindex"){
obj.style[k] = json[k];
}else{
var leader = parseint(getstyle(obj,k)) || 0;
var target = json[k];
var step = (target - leader) /10;
step = step >0 ? math.ceil(step) : math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
}
console.log("target:" + target + "leader:" + leader + "step:" + step);
if (leader != target){
flag = false;
}
}
if (flag){
clearinterval(obj.timer);
if(fn){
fn();
}
}
},15)
}
function getstyle(obj,attr){
if (obj.currentstyle){
return obj.currentstyle[attr];
}else{
return window.getcomputedstyle(obj,null)[attr];
}
}
在html部分引入的my.js文件部分代码
/**
* created by renpingsheng on 2018/4/6.
*/
window.onload = function () {
var wrap = document.getelementbyid("wrap");
var slide = document.getelementbyid("slide");
var ul = slide.children[0];
var lis = ul.children;
var arrow = document.getelementbyid("arrow");
var arrright = document.getelementbyid("arrright");
var arrleft = document.getelementbyid("arrleft");
var config = [
{
width:400,
top:20,
left:50,
opacity:0.2,
zindex:2
},
{
width:600,
top:70,
left:0,
opacity:0.8,
zindex:3
},
{
width:800,
top:100,
left:200,
opacity:1,
zindex:4
},
{
width:600,
top:70,
left:600,
opacity:0.8,
zindex:3
},
{
width:400,
top:20,
left:750,
opacity:0.2,
zindex:2
}
];
wrap.onmouseover = function () {
animate(arrow,{"opacity":1});
}
wrap.onmouseout = function () {
animate(arrow,{"opacity":0});
}
function assign() {
for(var i = 0;i < lis.length;i++){
animate(lis[i],config[i],function(){
flag = true;
})
}
}
var flag = true;
assign();
arrright.onclick = function () {
flag = false;
config.push(config.shift());
assign();
};
arrleft.onclick = function () {
flag = false;
config.unshift(config.pop());
assign();
}
}
代码完成后，用浏览器打开网页，效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。