2. 程式人生 > >js：使用angular實現畫廊效果

js：使用angular實現畫廊效果

阿新 • • 發佈：2018-01-10
ots function width -c sheet all one ng-repeat content 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../angular-1.6.5/angular.js"></script>
    <style type="text/css">
        *{padding:0px;margin: 0px;list-style-type: none;}
        .bb{
            transition:all 1s ;
        }
    
 
</style>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl" style="margin:0px auto;overflow:hidden; position:relative; width:540px">
        <!--/*通過比較此參數決定是否使用此樣式*/-->
        <ul ng-style="uls" style="width: 2160px;position: relative; overflow:
             hidden; padding: 0px; margin: 0px;
 
" ng-class="{bb:1==see}">
            <!--循環遍歷lis-->
               <li ng-style="aa" style="float: left; width: 540px;" ng-repeat="item in lis">
                  <img src="{{item.img}}" />
               </li>
        </ul>
    </div>
</body>
<script language="JavaScript">
    var
 
 app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.lis = [
            {"img":"../image/slide1.jpg"},
            {"img":"../image/slide2.jpg"},
            {"img":"../image/slide3.jpg"}
        ]
        $scope.uls = {"left":"0px"};
            var index=0;
        $scope.see=1;
        var ll=0;
            setInterval(function(){
                $scope.$apply(function(){   //如果在setInterval或者其它js類似方法中修改了數據，需要手動通過apply更新。
                    var lv=parseInt($scope.uls.left);

                    if(index==2){
                        if(ll==2){
                        $scope.lis = [
                            {"img":"../image/slide3.jpg"},
                            {"img":"../image/slide1.jpg"},
                            {"img":"../image/slide2.jpg"}
                        ]
                        }else if(ll==4){
                            $scope.lis = [
                                {"img":"../image/slide2.jpg"},
                                {"img":"../image/slide3.jpg"},
                                {"img":"../image/slide1.jpg"}
                            ]
                        }else if(ll==6){
                            $scope.lis = [
                                {"img":"../image/slide1.jpg"},
                                {"img":"../image/slide2.jpg"},
                                {"img":"../image/slide3.jpg"}
                            ]
                            ll=0;
                        }
                        console.log(ll);
                        $scope.see=0;
                        index=0;
                        lv=0;


                    }else{$scope.see=1;lv-=540;index++;ll++;}
                          $scope.uls.left = lv+"px";

                })
            },1500);
    });

</script>
</html>

js：使用angular實現畫廊效果

相關推薦

js：使用angular實現畫廊效果

ots function width -c sheet all one ng-repeat content <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT

js代碼實現購物車效果

todo ssa lse custom () 分享 sel map 失敗 頁面分上下兩部分，上部分是所有的數據，下部分是購物車。通過在上面選擇需要處理的數據添加進到購物車，實現對購物車數據的統一處理。 需要註意的有兩點：①購物車數據可刪除，且不能重復添加 ②響應時間考慮，

商品秒殺倒計時功能+ViewPager實現畫廊效果

模式一：列表形式展示資料，倒計時完成移除此條資料 效果： 涉及到的技術：RecyclerView、CardView、Fresco、CountDownTimer等，可以到本部落格去查詢 // 倒計時的實現 public class Tim

****timeago.js插件：jquery實現幾分鐘前、幾小時前、幾天前等時間差顯示效果的代碼實例

request lob span months mes err settings proto oca 前端 時間個性化 插件 jquery.timeago.js 關鍵詞 ： 時間格式化 剛剛 N分鐘前 N小時前 N天前 N月前 N年前 MM-dd hh:mm 或

js：簡單的拖動效果

p s move ntb rec cti release 樣式 left eve 效果演示：https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="w

html+JS刷圖實現視頻效果

java scrip snap hive image com htm load() logs 網頁播放視頻須要載入播放器，可是通過刷圖也能實現視頻播放的效果 JS中用到Z-index屬性，記錄一篇解說Z-index屬性的博客的地址： http://www.cnblogs

RecyclerView實現終極畫廊效果 中間突出並且壓住兩側布局

div -1 我認 with lis dsi style only his 先給大家上個gif 要不然下面很枯燥 忘記原來在哪裏看到了..... 這個效果我找了NNNNNN長時間,,,我認為憑我現在的能力 寫出來需要好久 所以 退而求其次找大神寫好的... 你們不

Swift - 使用CollectionView實現圖片Gallery畫廊效果（左右滑動瀏覽圖片）

abs ber pad comment style 即將 使用 ram 數據源 1，效果圖 （1）圖片從左至右橫向排列（只有一行），通過手指拖動可以前後瀏覽圖片。 （2）視圖滾動時，每張圖片根據其與屏幕中心距離的不同，顯示尺寸也會相應地變化。越靠近屏幕中心尺寸就越大，遠離

原生JS實現放大鏡效果

use 瀏覽器 賦值 uri 字符串 () solid adding clas 效果： 1、 鼠標放上去會有半透明遮罩、右邊會有大圖片局部圖 2、 鼠標移動時右邊的大圖片也會局部移動 放大鏡的關鍵原理： 鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相

two.js之實現動畫效果

矢量圖 bsp 面向 tex get yellow text city ctype 一、什麽是two.js？ Two.js 是面向現代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用於多個場合：SVG，Canvas 和 WebGL，旨在使平面形狀和動畫的創建更方

第161天：CSS3實現兼容性的漸變背景(gradient)效果

end 創建 lte tco study tro 背景漸變 開始 col CSS實現兼容性的漸變背景(gradient)效果 一、有點俗態的開場白 在對CSS3支持日趨完善的今天，實現兼容性的漸變背景效果已經完全成為可能，本文就將展示如何實現兼容性的漸變背景效果。在眾多的

js實現放大鏡效果

設置 信息 鼠標 放大 ack 視口 seo bim wid html部分 <div id="box"> <img width="100%" height="100%" src="images/1.png" alt="#">

egret 示例實戰六：延遲操作，實現打字效果

for size 文本 方法 分享圖片 vat con code 哈哈 1.建立TextField對象 1 /**建立文本對象 */ 2 this.txt = new egret.TextField(); 3 this.txt.siz

主流前端框架對比：Vue.js , React, Angular.js

.cn angular nbsp 入門 react 如果 blog reac 示例 個人認為Vue.js的文檔最懇切。我認為結合文檔和遇到問題Google答案的匹配度來講：Vue.js > ReactJS > AngularJS > Angular 2

js實現滾動效果

ul li border float ack col 原理 tag absolute func 　　滾動效果通過setInterval定時函數去實現的，setInterval定時讓ul每過一段時間就移動，移動其實是left的值在變大，讓ul移動的必須讓這個div是絕對定位的

JS用函式實現：輸入年，月，日，獲取這個日期是這一年的第多少天

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body>

JS：使用c:forEach實現下拉選擇

思路 後臺生成xxlist，新增到model中 使用c:forEach將list中的xx迴圈出來，放到每一個option中 程式碼 <div class="form-group"> <label class="col-sm

JS：layer.js實現loading：訂單匯入中

1.引入 <script src="${pageContext.request.contextPath}/core/js/layer/layer.js"></script> 使用 $("#importYz").cl

前端技術：vue+axios+mockJS實現購物車效果

購物車是一個商城程式的典型功能模組，之前使用jquery製作過，也使用angular開發過，今天將使用Vue實現購物車效果，使用的主要技術有vue+axios+mockJS等。 購物車的主要功能如下： 1. 勾選全選，所有商品全部選中。在取消全選框的時候所有商品取消選擇。 2. 點選單個商品上的加號

73 - three.js 筆記 - 設定折射貼圖比率 refractionRatio 加環境貼圖實現反射效果

通過給物體設定環境貼圖envMap可以實現虛假的反射效果，通過設定CubeCamera可以實現動態的反光，設定材質的refractionRatio 屬性可以實現透明反射的效果。 1、示例 示例 http://ithanmang.com/threeJs/home/201809/201