轮播图技术实战
typora-root-url: assetis
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-coJ8qZrI-1641605498062)(.\image-20210325233927344.png)]
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-JqbXdWaV-1641605498064)(.\image-20210326095219815.png)]
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>輪播圖</title><style>.box{width: 520px;height: 280px;/* border: 4px solid rgba(186, 187, 194, 0.6); */margin: 50px auto;position: relative;}.inner{width: 520px;/* overflow-x: scroll; */overflow-x: hidden;scroll-margin-left: 50px;}.con{width: 2600px;height: 100%;overflow: hidden;}.con>img{width: 520px;height: 280px;float: left;}/* 修改list的樣式 */.list{overflow: hidden;list-style: none;position: absolute;bottom: 1px;left: 68px;}.list>li{width: 30px;height: 8px;background-color: rgb(163,163,163);float: left;margin-left: 40px;}.list>li.active{background-color: white;}</style> </head><body><div class="box"><div class="inner"><div class="con"><img src="./image/0.jpg" alt=""><img src="./image/1.jpg" alt=""><img src="./image/2.jpg" alt=""><img src="./image/3.jpg" alt=""><img src="./image/4.jpg" alt=""></div><ul class="list"><li></li><li></li><li></li><li></li><li></li></ul></div></div> </body><script>//獲取照片元素var imgs_ = document.getElementsByTagName('img');var inner_ = document.getElementsByClassName('inner')[0];var lis =document.getElementsByTagName('li');//自動(dòng)執(zhí)行的時(shí)間var timer = null;var timer2 = null;//執(zhí)行每一步的間隔函數(shù)var x = 0; //每張圖片的下標(biāo)function autoMove(){timer = setInterval(function(){x++;//圖片下標(biāo)不能大于圖片的個(gè)數(shù)if(x>=imgs_.length){x = 0;}//動(dòng)起來(lái)var step = 0;//初始化步數(shù)var maxStep = 20; //最大20步走完var start = inner_.scrollLeft;//起始位置var end = imgs_[0].offsetWidth * x; //結(jié)束位置var everyStep = (end - start) / maxStep; //執(zhí)行每一步的步長(zhǎng)timer2 = setInterval(function(){step++;if(step>=maxStep){step = 0;clearInterval(timer2);}start += everyStep;inner_.scrollLeft = start;},15)for(var i =0;i<lis.length;i++){lis[i].className='';}lis[x].className = 'active';lis[x].onclick = function(){clearInterval(timer);}imgs_[x].onclick =function(){clearInterval(timer);}imgs_[x].ondblclick = function(){autoMove();}},2000);}autoMove(); </script> </html>封裝后：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>輪播圖</title><style>.box {width: 520px;height: 280px;/* border: 4px solid rgba(186, 187, 194, 0.6); */margin: 50px auto;position: relative;}.inner {width: 520px;/* overflow-x: scroll; */overflow-x: hidden;scroll-margin-left: 50px;}.con {width: 2600px;height: 100%;overflow: hidden;}.con>img {width: 520px;height: 280px;float: left;}/* 修改list的樣式 */.list {overflow: hidden;list-style: none;position: absolute;bottom: 1px;left: 68px;}.list>li {width: 30px;height: 8px;background-color: rgb(163, 163, 163);float: left;margin-left: 40px;}.list>li.active {background-color: white;}</style> </head><body><div class="box"><div class="inner"><div class="con"><img src="./image/0.jpg" alt=""><img src="./image/1.jpg" alt=""><img src="./image/2.jpg" alt=""><img src="./image/3.jpg" alt=""><img src="./image/4.jpg" alt=""></div><ul class="list"><li></li><li></li><li></li><li></li><li></li></ul></div></div> </body><script>//獲取照片元素var imgs_ = document.getElementsByTagName('img');var inner_ = document.getElementsByClassName('inner')[0];var lis = document.getElementsByTagName('li');//自動(dòng)執(zhí)行的時(shí)間var timer = null;var timer2 = null;//執(zhí)行每一步的間隔函數(shù)var x = 0; //每張圖片的下標(biāo)function autoMove() {timer = setInterval(function () {x++;//圖片下標(biāo)不能大于圖片的個(gè)數(shù)if (x >= imgs_.length) {x = 0;}//動(dòng)起來(lái)gogo();//改變list的狀態(tài)change_list();}, 2000);}function gogo() {var step = 0;//初始化步數(shù)var maxStep = 20; //最大20步走完var start = inner_.scrollLeft;//起始位置var end = imgs_[0].offsetWidth * x; //結(jié)束位置var everyStep = (end - start) / maxStep; //執(zhí)行每一步的步長(zhǎng)timer2 = setInterval(function () {step++;if (step >= maxStep) {step = 0;clearInterval(timer2);}start += everyStep;inner_.scrollLeft = start;}, 15)}function change_list(){for (var i = 0; i < lis.length; i++) {lis[i].className = '';}lis[x].className = 'active';lis[x].onclick = function () {clearInterval(timer);}imgs_[x].onclick = function () {clearInterval(timer);}imgs_[x].ondblclick = function () {autoMove();}}autoMove(); </script></html> clearInterval(timer);}imgs_[x].onclick = function () {clearInterval(timer);}imgs_[x].ondblclick = function () {autoMove();} } autoMove(); ```總結(jié)
- 上一篇： JavaScript实现单词首字母大写的
- 下一篇： 鸿蒙系统概述