简单实现AngularJS轮播图效果

本文实例为大家分享了AngularJS轮播图的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
 <meta charset="UTF-8">
 <title>AngularJS carousel</title>
 <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
 <div ng-controller="CarouselDemoCtrl">
 <div style="height: 305px">
  <carousel interval="myInterval" no-wrap="noWrapSlides">
  <slide ng-repeat="slide in slides" active="slide.active">
   <center>
   <img ng-src="{{slide.image}}" style="width:800px;hight:800px;"></center>
   <div class="carousel-caption">
   <h4>Slide {{$index}}</h4>
   <p>{{slide.text}}</p>
   </div>
  </slide>
  </carousel>
 </div>
 </div>
 <script src="http://apps.bdimg.com/libs/angular.js/1.3.13/angular.min.js"></script>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular-animate.min.js"></script>
 <script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
 <script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
 <script>
 angular.module('myApp', ['ui.bootstrap', 'ngAnimate']).controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 2000;
  $scope.noWrapSlides = false;
  var slides = $scope.slides = [];
  $scope.addSlide = function () {
  var newWidth = 600 + slides.length + 1;

  slides.push({
   image: 'http://www.jb.com/image/img/20161204212016_909.jpg',
   text: '允儿',
  });
  slides.push({
   image: 'http://www.jb.com/image/img/20161204212035_614.jpg',
   text: '寄语',
  });
  slides.push({
   image: 'http://www.jb.com/image/img/20170111210803_785.jpg',
   text: '宠物',
  });
  slides.push({
   image: 'http://www.jb.com/image/img/20161204212931_644.jpg',
   text: '精灵',
  });
  };
  $scope.addSlide();
 });
 </script>
</body>
</html>

注:图片是本地的路径

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

赞 (0)

相关推荐

  • 原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

    原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

    本文实例讲述了原生JavaScript实现的淘宝轮播图效果.分享给大家供大家参考,具体如下: 轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直接上图 HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • 原生js实现网易轮播图效果

    原生js实现网易轮播图效果

    一.实现效果图 二.分析布局 主盒子里分上下两个小盒子(1和2). 包含图片的盒子占两张图片的宽(3),处于上盒子中,当前图片在上盒子(1)中,其它图片在盒子(3)的右侧等待播放. 下边的盒子(2)包括了六个小方块及定位在主盒子上的两个箭头. 三.html部分   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wa

  • 用JS实现轮播图效果（二）

    用JS实现轮播图效果（二）

    在上一篇用JS实现图片轮播效果代码(一)的基础上,增加了左右箭头的响应事件,实现了点击左右箭头也可以让图片滚动: js代码如下: window.onload = function(){ //轮播初始化 var lunbo = document.getElementById('content'); var imgs = lunbo.getElementsByTagName('img'); var uls = lunbo.getElementsByTagName('ul'); var lis = l

  • JS实现左右无缝轮播图代码

    废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

  • 利用AngularJs实现京东首页轮播图效果

    利用AngularJs实现京东首页轮播图效果

    先来看看效果图 其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo

  • 原生js实现焦点轮播图效果

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图 2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index 3.间隔调用与无限轮播. 4.注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行 5.另外在切换图片的时候,底部的Button动画效果,是从底部开始往上升的,要用到transform:scale()和transform-origin:0 100%两个转换属性,代码如下 <!DOCTYPE html> <html&g

  • JS实现的简单轮播图运动效果示例

    本文实例讲述了JS实现的简单轮播图运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title&

  • js改变透明度实现轮播图的算法

    前面有分享过改变层级的轮播图算法,今天继续利用透明度来实现无位移的轮播图算法. 实现逻辑:将所有要轮播的图片全部定位到一起,即一层一层摞起来,并且利用层级的属性调整正确的图片顺序,将图片的透明度全部设置为0,然后在让初始的第一张图片的透明度为1即可,具体算法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>改变透明度算法(经典)</title&

  • js实现支持手机滑动切换的轮播图片效果实例

    js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • 简单的JS轮播图代码

    简单的JS轮播图代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

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

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} #demo{width:1200px;mar

随机推荐