js实现旋转木马轮播图效果

站长资源 2024/11/26 佚名

2 0 1

本文实例为大家分享了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="/UploadFiles/2021-04-02/animate.js">

在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 "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 "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();
 }
}


代码完成后，用浏览器打开网页，效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js旋转木马轮播图,js木马轮播图,js轮播图

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“js实现旋转木马轮播图效果”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

js实现旋转木马轮播图效果

jquery选择器和属性对象的操作实例分析

微信小程序新闻网站详情页实例代码

评论“js实现旋转木马轮播图效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接