美文网首页从零开始学前端sen
前端基本功:JS(十二)网易轮播图/ 旋转轮播图

前端基本功:JS(十二)网易轮播图/ 旋转轮播图

作者: 越IT | 来源:发表于2016-11-28 17:51 被阅读403次

网易轮播图:

网易轮播图.gif

案例素材及源码:
链接:http://pan.baidu.com/s/1pLgzkVp 密码:9buw

json 两种声明方式

1/对象声明

   var  json = {width:100,height:100}

2/ 数组声明

  var  man = [        //  数组的 json  
   {
       name:"刘德华",
       age : 16,
       address: "香港"
   },
   {
       name:"张学友",
       age: 33,
       address: "澳门"
   },
   {
       name:"黎明",
       age: 55,
       address: "大陆"
   }
];
for(var i=0;i<man.length;i++)
{
   console.log(man[i].name);  
}

旋转轮播图

旋转轮播图.gif
案例素材及源码:
链接:http://pan.baidu.com/s/1kU4D9kj 密码:oxrr

旋转原理:

每次点击 按钮, 他们的json 数值就更换就可以了.
删除和添加 数组
pop() 删除最后一个
shift() 删除第一个
push() 追加 添加到最后面
unshift() 添加到 第一个位置
** 把 最后一个json 删除 并且把最后一个添加到json 第一个位置**
json.unshift(json.pop());
json.pop() 删除最后一个元素
console.log(json.pop()) 返回最后一个值

相关文章

  • 前端基本功:JS(十二)网易轮播图/ 旋转轮播图

    网易轮播图: 案例素材及源码:链接:http://pan.baidu.com/s/1pLgzkVp 密码:9buw...

  • 兼容ie8的轮播图

    效果图: 前端html代码: 前端css代码: 轮播图js代码:

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • 使用vue-awesome-swiper方法

    在main.js中引入轮播图插件 在基础组件中建立轮播图组件:

  • 轮播图

    轮播图01 html css js

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步,得到元素 第二步,设置...

  • 纯CSS实现轮播图

    天天写前端的你,会自己写一个轮播图吗,而且不能用js哦,知道轮播图的原理吗? 今天我们要讲的是如何只用css实现轮...

网友评论

    本文标题:前端基本功:JS(十二)网易轮播图/ 旋转轮播图

    本文链接:https://www.haomeiwen.com/subject/lrigpttx.html