生活随笔
收集整理的這篇文章主要介紹了
小案例---淘宝轮播图实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
通過自己的自學(xué)，初步完成了淘寶輪播圖的實(shí)現(xiàn)，可能代碼上還沒得到很多優(yōu)化，希望大家可以幫我指出一下，非常感謝！
代碼如下：
<!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(){//手動(dòng)調(diào)用點(diǎn)擊事件iconright.click();},2000);})//緩動(dòng)動(dòng)畫函數(shù)function animate(obj,target,callback){clearInterval(obj.timer);obj.timer = setInterval(function(){//幫步長(zhǎng)值變?yōu)檎麛?shù)Math.celivar step = (target-obj.offsetLeft)/10;step=step > 0 ? Math.ceil(step) : Math.floor(step);if(obj.offsetLeft == target){//停止定時(shí)器clearInterval(obj.timer);if(callback){//回調(diào)函數(shù)，可以在傳實(shí)參時(shí)傳入函數(shù)callback();}}//每次加1的固定值換成動(dòng)態(tài)的慢慢變小的值 步長(zhǎng)公式:(目標(biāo)值-現(xiàn)在位置)/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';//點(diǎn)擊小圓圈移動(dòng)圖片//ul的移動(dòng)距離 小圓圈的索引號(hào)乘以圖片的寬度，是負(fù)值var index = this.getAttribute('index');//當(dāng)我們點(diǎn)擊了小圓圈需要將小圓圈的索引值賦值給num保持一致num=index;//當(dāng)我們點(diǎn)擊了小圓圈需要將小圓圈的索引值賦值給circle保持一致circle=index;animate(bannerlist1,-index*liwidth)})bannerdot.children[0].className='show';}//6.克隆第一張圖片放在最后面var first = bannerlist[0].cloneNode(true);bannerlist1.appendChild(first);//7.點(diǎn)擊右側(cè)按鈕，移動(dòng)一張圖片// 7.1定義一個(gè)變量，當(dāng)他點(diǎn)擊后加1,從而達(dá)到bannerlist的移動(dòng)距離var num=0;//7.2控制小圓圈的播放var circle = 0;// flag是一個(gè)節(jié)流閥var flag = true;//右側(cè)按鈕實(shí)現(xiàn)iconright.addEventListener('click',function(){if(flag){flag=false//關(guān)閉節(jié)流閥if(num==bannerlist1.children.length-1){bannerlist1.style.left=0;num=0;}num++;animate(bannerlist1,-num*liwidth,function(){flag=true;});circle++;//如果circle等于4，說(shuō)明走到了最后克隆的圖片，需要將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';}//判斷是否到達(dá)最后一張圖片，如果定義的變量等于了li的數(shù)量了，那么就讓他很快的left為0，幾乎看不到})//左側(cè)按鈕功能實(shí)現(xiàn)iconleft.addEventListener('click',function(){if(flag){flag=false;//判斷是否到達(dá)最后一張圖片，如果定義的變量等于了li的數(shù)量了，那么就讓他很快的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';}})//自動(dòng)播放功能實(shí)現(xiàn)var timer = setInterval(function(){//手動(dòng)調(diào)用點(diǎn)擊事件iconright.click();},2000);</script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的小案例---淘宝轮播图实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
