JS實現(xiàn)旋轉(zhuǎn)木馬輪播圖
本文實例為大家分享了JS實現(xiàn)旋轉(zhuǎn)木馬輪播圖的具體代碼,供大家參考,具體內(nèi)容如下
知識點
1、旋轉(zhuǎn)木馬思想:
1)、固定五種圖片的位置信息jsonArr進行布局
2)、點擊<或者>會對jsonArr進行重新排序,重新排序后對界面重新進行布局
2、數(shù)據(jù)驅(qū)動界面,數(shù)據(jù)的改變會影響界面
3、數(shù)組的四種操作
① push:push() 方法可向數(shù)組的末尾添加一個或多個元素,并返回新的長度。
② pop:pop() 方法用于刪除并返回數(shù)組的最后一個元素。
③ shift:shift() 方法用于把數(shù)組的第一個元素從其中刪除,并返回第一個元素的值。
④ unshift:unshift() 方法可向數(shù)組的開頭添加一個或更多元素,并返回新的長度。
引入工具庫工具庫
運行效果
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; border: none; list-style: none; } img { vertical-align: top; } body { background-color: #000; } #slider { width: 1200px; height: 460px; margin: 100px auto; position: relative; /*background-color: red;*/ } #slider li { position: absolute; left: 200px; top: 0; } #slider li img { width: 100%; height: 100%; } .slider_ctl_prev, .slider_ctl_next { width: 76px; height: 112px; position: absolute; top: 50%; margin-top: -56px; z-index: 99; } #slider_ctl { opacity: 0; } .slider_ctl_prev { background: url("images/prev.png") no-repeat; left: 0; } .slider_ctl_next { background: url("images/next.png") no-repeat; right: 0; } </style> </head> <body> <div id="slider"> <ul id="slider_main"> <li><img src="images/slidepic1.jpg" alt=""></li> <li><img src="images/slidepic2.jpg" alt=""></li> <li><img src="images/slidepic3.jpg" alt=""></li> <li><img src="images/slidepic4.jpg" alt=""></li> <li><img src="images/slidepic5.jpg" alt=""></li> </ul> <div id="slider_ctl"> <span class="slider_ctl_prev"></span> <span class="slider_ctl_next"></span> </div> </div> <script src="../00MyTools/MyTools.js"></script> <script> window.addEventListener('load',function (ev) { // 1. 獲取需要標簽 var slider = myTool.$('slider'); var sliderMain = myTool.$('slider_main'); var allLis = sliderMain.children; var sliderCtl = myTool.$('slider_ctl'); // 2. 位置信息 var jsonArr = [ {"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"} ]; // 將位置信息作用到圖片上去 for (var i = 0; i < jsonArr.length; i++) { myTool.slowMoving(allLis[i], jsonArr[i]); } // 3. 設(shè)置顯示和隱藏 slider.addEventListener('mouseover', function () { myTool.slowMoving(sliderCtl, {'opacity': 1}); }); slider.addEventListener('mouseout', function () { myTool.slowMoving(sliderCtl, {'opacity': 0}); }); // 4. 監(jiān)聽點擊 for (var j = 0; j < sliderCtl.children.length; j++) { var item = sliderCtl.children[j]; item.addEventListener('click',function (evt) { if (this.className === 'slider_ctl_prev'){ // 點擊左邊 // 兩種方式 // 1. 改變數(shù)據(jù)影響標簽 數(shù)據(jù)驅(qū)動界面 // 2. 改變標簽適應(yīng)數(shù)據(jù) jsonArr.push(jsonArr.shift()) }else{ // 點擊右邊 jsonArr.unshift(jsonArr.pop()) } // 重新布局 for (var i = 0; i < jsonArr.length; i++) { myTool.slowMoving(allLis[i], jsonArr[i]); } },false); } },false) </script> </body> </html>
更多關(guān)于輪播圖效果的專題,請點擊下方鏈接查看學(xué)習(xí)
javascript圖片輪播效果匯總
jquery圖片輪播效果匯總
Bootstrap輪播特效匯總
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:Angular8 實現(xiàn)table表格表頭固定效果
欄 目:JavaScript
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9328.html
您可能感興趣的文章
- 04-02java后端代碼分頁 java后端實現(xiàn)分頁page
- 01-10Echarts實現(xiàn)單條折線可拖拽效果
- 01-10在Vue項目中使用Typescript的實現(xiàn)
- 01-10js實現(xiàn)上傳圖片并顯示圖片名稱
- 01-10Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法
- 01-10echarts實現(xiàn)折線圖的拖拽效果
- 01-10d3.js實現(xiàn)圖形縮放平移
- 01-10小程序簡單兩欄瀑布流效果的實現(xiàn)
- 01-10H5實現(xiàn)手機拍照和選擇上傳功能
- 01-10Echarts實現(xiàn)多條折線可拖拽效果


閱讀排行
本欄相關(guān)
- 04-02javascript點線,點線的代碼
- 04-02javascript潛力,javascript強大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報,JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機閱讀
- 01-11ajax實現(xiàn)頁面的局部加載
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10delphi制作wav文件的方法
- 04-02jquery與jsp,用jquery
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10C#中split用法實例總結(jié)