生活随笔
收集整理的這篇文章主要介紹了
小案例---淘宝轮播图实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通過自己的自學，初步完成了淘寶輪播圖的實現，可能代碼上還沒得到很多優化，希望大家可以幫我指出一下，非常感謝！
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}img{display: block;}.banner{width: 520px;height: 282px;margin: 100px ;position: relative;overflow: hidden;}.banner .banner-list{width: 600%;height: 100%;list-style: none;position: absolute;top: 0;}.banner .banner-list li{float: left;}.banner .banner-dot{height: 13px;margin-left: -35px;position: absolute;list-style: none;left: 50%;bottom: 15px;background-color: rgba(250,250,250,.3);border-radius: 5px;padding:3px;box-sizing: border-box;}.banner .banner-dot li{width: 8px;height: 8px;float: left;border-radius: 50%;background-color: #fff;margin-right: 5px;}.banner .banner-dot .show{background-color: #ff5000;}.banner .banner-dot li:last-child{margin-right: 0px;}.banner .banner-icon .icon-left{width: 40px;height: 30px;line-height: 30px;border-radius:20px;text-align: right;padding-right: 8px;position: absolute;font-size: 24px;color: #fff;box-sizing: border-box;background-color: rgba(0, 0, 0, .3);left: -15px;top: 50%;display: none;z-index: 10;cursor: pointer;}.banner .banner-icon .icon-right{width: 40px;height: 30px;line-height: 30px;border-radius:20px;text-align: left;padding-left: 8px;position: absolute;font-size: 24px;color: #fff;box-sizing: border-box;background-color: rgba(0, 0, 0, .3);right: -15px;top: 50%;display: none;z-index: 10;cursor: pointer;}</style>
</head>
<body><div class="banner"><div class="banner-icon"><span class="icon-right">></span><span class="icon-left"> < </span></div><ul class="banner-list"><li><img src="https://img.alicdn.com/simba/img/TB1MP9_yYY1gK0jSZTESutDQVXa.jpg " alt=""> </li><li><img src="https://img.alicdn.com/simba/img/TB1GzT0zXT7gK0jSZFpSuuTkpXa.jpg" alt=""> </li><li><img src="https://img.alicdn.com/tfs/TB15Z_Gzbr1gK0jSZR0XXbP8XXa-520-280.jpg_q90_.webp" alt=""></li><li><img src="https://img.alicdn.com/tfs/TB1bvcMyFT7gK0jSZFpXXaTkpXa-520-280.jpg_q90_.webp" alt=""></li><li><img src="https://img.alicdn.com/simba/img/TB1kyuIy7L0gK0jSZFtSutQCXXa.jpg" alt=""></li></ul><ol class="banner-dot"></ol></div><script>var banner = document.querySelector('.banner');var bannerlist1=document.querySelector('.banner-list');var bannerlist=document.querySelectorAll('.banner-list li');var bannerdot=document.querySelector('.banner-dot');var iconleft =document.querySelector('.icon-left');var iconright =document.querySelector('.icon-right');var liwidth = banner.offsetWidth; banner.addEventListener('mouseenter',function(){iconleft.style.display = 'block';iconright.style.display = 'block';clearInterval(timer);timer=null;});banner.addEventListener('mouseleave',function(){iconleft.style.display = 'none';iconright.style.display = 'none';timer = setInterval(function(){//手動調用點擊事件iconright.click();},2000);})//緩動動畫函數function animate(obj,target,callback){clearInterval(obj.timer);obj.timer = setInterval(function(){//幫步長值變為整數Math.celivar step = (target-obj.offsetLeft)/10;step=step > 0 ? Math.ceil(step) : Math.floor(step);if(obj.offsetLeft == target){//停止定時器clearInterval(obj.timer);if(callback){//回調函數，可以在傳實參時傳入函數callback();}}//每次加1的固定值換成動態的慢慢變小的值 步長公式:(目標值-現在位置)/10obj.style.left = obj.offsetLeft + step + 'px';},15);}for(var i=0;i<=bannerlist.length-1;i++){var li = document.createElement('li');//為小圓圈加索引li.setAttribute('index',i);bannerdot.appendChild(li);li.addEventListener('click',function(){for(var j=0;j<=bannerdot.children.length-1;j++){bannerdot.children[j].className='';}this.className='show';//點擊小圓圈移動圖片//ul的移動距離 小圓圈的索引號乘以圖片的寬度，是負值var index = this.getAttribute('index');//當我們點擊了小圓圈需要將小圓圈的索引值賦值給num保持一致num=index;//當我們點擊了小圓圈需要將小圓圈的索引值賦值給circle保持一致circle=index;animate(bannerlist1,-index*liwidth)})bannerdot.children[0].className='show';}//6.克隆第一張圖片放在最后面var first = bannerlist[0].cloneNode(true);bannerlist1.appendChild(first);//7.點擊右側按鈕，移動一張圖片// 7.1定義一個變量，當他點擊后加1,從而達到bannerlist的移動距離var num=0;//7.2控制小圓圈的播放var circle = 0;// flag是一個節流閥var flag = true;//右側按鈕實現iconright.addEventListener('click',function(){if(flag){flag=false//關閉節流閥if(num==bannerlist1.children.length-1){bannerlist1.style.left=0;num=0;}num++;animate(bannerlist1,-num*liwidth,function(){flag=true;});circle++;//如果circle等于4，說明走到了最后克隆的圖片，需要將circle為重置為0if(circle==bannerlist1.children.length-1){circle=0;}for(var i=0;i<=bannerdot.children.length-1;i++){bannerdot.children[i].className='';}bannerdot.children[circle].className='show';}//判斷是否到達最后一張圖片，如果定義的變量等于了li的數量了，那么就讓他很快的left為0，幾乎看不到})//左側按鈕功能實現iconleft.addEventListener('click',function(){if(flag){flag=false;//判斷是否到達最后一張圖片，如果定義的變量等于了li的數量了，那么就讓他很快的left為0，幾乎看不到if(num==0){num=bannerlist1.children.length-1;bannerlist1.style.left=-num*liwidth + 'px';}num--;animate(bannerlist1,-num*liwidth,function(){flag=true;});circle--;//如果circle小于0 if(circle<0){circle=bannerdot.children.length-1;}for(var i=0;i<=bannerdot.children.length-1;i++){bannerdot.children[i].className='';}bannerdot.children[circle].className='show';}})//自動播放功能實現var timer = setInterval(function(){//手動調用點擊事件iconright.click();},2000);</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的小案例---淘宝轮播图实现的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
