js實(shí)現(xiàn)滑動輪播效果
更新時(shí)間：2021年09月22日 11:40:59 作者：不忘初心ing
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)滑動輪播效果的具體代碼，供大家參考，具體內(nèi)容如下
1、構(gòu)建html樣式，代碼如下
<div class="banner">
<ul>
<li>
<a href="#" >
<img src="images/1.jpeg">
</a>
</li>
<li>
<a href="#" >
<img src="./images/2.jpg">
</a>
</li>
<li>
<a href="#" >
<img src="./images/3.jpg">
</a>
</li>
<li>
<a href="#" >
<img src="./images/4.jpg">
</a>
</li>
<li>
<a href="#" >
<img src="./images/5.jpg">
</a>
</li>
</ul>
<ol>
</ol>
<a href="#" class="left"><</a>
<a href="#" class="right">></a>
</div>
2、了解html基本結(jié)構(gòu) 圖片的路徑可以根據(jù)自己來，把html結(jié)構(gòu)用css樣式簡單修飾，代碼如下
<style>
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
color:#000;
}
.banner{
width: 500px;
height: 300px;
margin:50px auto;
position: relative;
border:1px solid #000;
overflow:hidden;
}
.banner ul{
position: absolute;
left: 0;
top: 0;
height: 300px;
/* width: 2500px; */
}
.banner ul li{
width: 500px;
height: 300px;
float:left;
}
.banner ul li a img{
width: 500px;
height: 300px;
}
.banner ol{
/* width: 100px; */
height: 20px;
position:absolute;
bottom:10px;
background-color: rgba(255,255,255,.7);
left:50%;
transform: translateX(-50%);
border-radius:10px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
/* .banner ol li{
width: 10px;
height: 10px;
border-radius:50%;
background-color: skyblue;
} */
.banner>a{
width: 20px;
height: 40px;
position:absolute;
top:50%;
transform: translateY(-50%);
background-color: rgba(10,10,10,.5);
font-size:20px;
color:#fff;
line-height: 2;
text-align: center;
}
.banner>a.left{
left: 0;
}
.banner>a.right{
right: 0;
}
3、基本布局結(jié)束后用js來實(shí)現(xiàn)輪播，代碼如下
var div = document.querySelector('.banner');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var left = document.querySelector('a.left');
var right = document.querySelector('a.right');
// 設(shè)置一個(gè)變量index 作為下標(biāo)的使用
var index = 1;
// 遍歷ul下面的li
for(var i=0;i<ul.children.length;i++){
// 一個(gè)ul下面的li要對應(yīng)一個(gè)下面的小圓點(diǎn)按鈕
// 創(chuàng)建同等數(shù)量的小圓點(diǎn)
var li = document.createElement('li');
setStyle(li,{
width: "10px",
height: "10px",
"border-radius":"50%",
"background-color": "skyblue"
})
// 把創(chuàng)建好的li 全部放到ol 這個(gè)大盒子里
ol.appendChild(li);
}
// ol這個(gè)大盒子本身是沒有寬度的 我們要根據(jù)里面的小圓點(diǎn)數(shù)量 設(shè)置ol大盒子的寬度
ol.style.width = ol.firstElementChild.offsetWidth*ul.children.length*2 + 'px';
// 設(shè)置一個(gè)變量 這個(gè)變量是代表有樣式的那個(gè)小圓點(diǎn)
var that = ol.children[index-1];
//給ol第一個(gè)兒子設(shè)置紅色
that.style.background = 'red';
// 實(shí)現(xiàn)滑動輪播更好的銜接，前后給ul各補(bǔ)一個(gè)li。
var lastLi = ul.lastElementChild.cloneNode(true);
var firstLi = ul.firstElementChild.cloneNode(true);
// 把復(fù)制好的標(biāo)簽分別放在ul大盒子的前面和后面
ul.appendChild(firstLi);
ul.insertBefore(lastLi,ul.firstElementChild);
// 因?yàn)閡l下面的子元素發(fā)生了變化 我們要給ul 設(shè)置相應(yīng)的寬度
ul.style.width = ul.children.length*lastLi.offsetWidth + 'px';
// 因?yàn)槲覀兓瑒邮菑挠彝蠡瑒拥?所以要給ul 的left值取負(fù)
ul.style.left = -ul.firstElementChild.offsetWidth + 'px';
// 設(shè)置變量 后面賦值給定時(shí)器
var timeId;
// 定義一個(gè)開關(guān)
var flag = true;
//右鍵點(diǎn)擊
right.onclick = function(){
// 如果開關(guān)沒打開 就返回一個(gè)false
if(!flag){
return false;
}
// 并把返回值賦值給 開關(guān) 說明開關(guān)關(guān)閉 再次點(diǎn)擊就沒有效果
flag = false;
// 前面我們定義了一個(gè)index 每當(dāng)我們點(diǎn)擊一下就index++
index++;
// 調(diào)用 move 函數(shù)
move(ul,{left:-index*ul.children[0].offsetWidth},function(){
// 把需要做的事情放在運(yùn)動結(jié)束后的函數(shù)里面
// 首先我們要給index 進(jìn)行判斷 ul總共七個(gè)子元素 index對應(yīng)的是ul子元素的下標(biāo) 所以 index是不能超過 ul.children.length-1;
if(index ==ul.children.length-1){
// 如果index等于ul.children.length-1
// 就重新給index賦值為1
index = 1;
// 并且也要給ul 的left值重新賦值
ul.style.left = -index*ul.children[0].offsetWidth + 'px';
}
// 小圓點(diǎn)也要跟著圖片一起動才行
// 我們給圖片對應(yīng)的那個(gè)小圓點(diǎn)設(shè)置成變量that 因?yàn)樾A點(diǎn)本身會有樣式 先給它設(shè)置樣式為默認(rèn)的
that.style.backgroundColor = 'skyblue';
// 對應(yīng)的這個(gè)小圓點(diǎn)的樣式就發(fā)生了變化
ol.children[index-1].style.backgroundColor = 'red';
// 樣式轉(zhuǎn)換成功后 在把含有樣式的小圓點(diǎn)賦值為變量that
that = ol.children[index-1];
// 運(yùn)動的最后面要把 開關(guān)打開 可以讓右擊再次打開
flag = true;
})
}
//左鍵點(diǎn)擊
left.onclick = function(){
if(!flag){
return false;
}
flag = false;
// 左點(diǎn)擊是從左往右滑動的就變成了index--
index--;
move(ul,{left:-index*ul.children[0].offsetWidth},function(){
if(index ==ul.children.length-1){
index = 1;
ul.style.left = -index*ul.children[0].offsetWidth + 'px';
}
// 進(jìn)入事件后首先判斷 index的 值
if(index==0){
// 如果index的值變成0就重新給index賦值
index = ul.children.length-2;
// 并且重新給ul的left賦值為第二張圖片的值
ul.style.left = -index * firstLi.offsetWidth + "px"
}
that.style.backgroundColor = 'skyblue';
ol.children[index-1].style.backgroundColor = 'red';
that = ol.children[index-1];
flag = true;
})
}
// 遍歷ol下面的所有l(wèi)i
for(let i=0;i<ol.children.length;i++){
// 點(diǎn)擊小圓點(diǎn)事件
ol.children[i].onclick = function(){
if(!flag){
return false;
}
flag = false;
// 因?yàn)樾A點(diǎn)的下邊比 圖片的下標(biāo)少1 在小圓點(diǎn)點(diǎn)擊事件中就要給index重新賦值
// 讓小圓點(diǎn)和圖片能對應(yīng)上
index = i+1;
move(ul,{left:-index*firstLi.offsetWidth},function(){
// if(index == 0){
// index = ul.children.length-2
// ul.style.left = -index.ul.children[0].offsetWidth + 'px'
// }
that.style.backgroundColor = 'skyblue';
ol.children[index-1].style.backgroundColor = 'red';
that = ol.children[index-1];
flag = true;
})
}
};
// 自動輪播
timeId = setInterval(function(){
if(!flag){
return false;
}
flag = false;
index++;
move(ul,{left:-index*firstLi.offsetWidth},function(){
if(index == ul.children.length-1){
index = 1
ul.style.left = -index*ul.children[0].offsetWidth + 'px'
}
that.style.backgroundColor = 'skyblue';
ol.children[index-1].style.backgroundColor = 'red';
that = ol.children[index-1];
flag = true;
})
},2000);
// 鼠標(biāo)劃過輪播停止
div.onmouseover = function(){
clearInterval(timeId);
}
//鼠標(biāo)離開后 在進(jìn)行自動輪播
div.onmouseout = function(){
timeId = setInterval(function(){
if(!flag){
return false;
}
flag = false;
index++;
move(ul,{left:-index*firstLi.offsetWidth},function(){
if(index == ul.children.length-1){
index = 1
ul.style.left = -index*ul.children[0].offsetWidth + 'px'
}
that.style.backgroundColor = 'skyblue';
ol.children[index-1].style.backgroundColor = 'red';
that = ol.children[index-1];
flag = true;
})
},1000);
};
//封裝好的多運(yùn)動函數(shù)
function move(ele,obj,fn){
let timeObj = {};
for(let attr in obj){
timeObj[attr] = setInterval(function(){
var target = parseFloat(obj[attr]);
if(attr === 'opacity'){
target*=100
}
var t = parseFloat(getStyle(ele,attr));
if(attr === 'opacity'){
t *=100
}
console.log(t)
if((target-t)/100>0){
var percent = Math.ceil((target-t)/100);
}else{
var percent = Math.floor((target-t)/100);
}
t += percent;
if(attr === 'opacity'){
ele.style[attr] = t/100
}else{
ele.style[attr] = t + 'px';
}
if(t == target){
clearInterval(timeObj[attr])
delete timeObj[attr]
let k = 0;
for(let i in timeObj){
k++;
}
if( k==0){
fn();
console.log(123)
}
}
},10)
}
}
// 封裝好的獲取樣式的函數(shù)
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele)[attr];
}else{
return ele.currentStyle[attr];
}
}
// 封裝設(shè)置樣式的函數(shù)
function setStyle(ele,styleObj){
for(var attr in styleObj){
ele.style[attr] = styleObj[attr];
}
};
4、輪播需要的圖片如下
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 原生JS無縫滑動輪播圖
- js原生實(shí)現(xiàn)移動端手指滑動輪播圖效果的示例
- js實(shí)現(xiàn)從左向右滑動式輪播圖效果
- JS實(shí)現(xiàn)自動輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動)
- JS實(shí)現(xiàn)touch 點(diǎn)擊滑動輪播實(shí)例代碼
- js實(shí)現(xiàn)固定寬高滑動輪播圖效果
- javascript經(jīng)典特效分享 手風(fēng)琴、輪播圖、圖片滑動
- js實(shí)現(xiàn)支持手機(jī)滑動切換的輪播圖片效果實(shí)例
- 原生js實(shí)現(xiàn)移動開發(fā)輪播圖、相冊滑動特效
- js實(shí)現(xiàn)上下滑動輪播
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)記憶翻牌游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼
這篇文章主要介紹了BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05
javascript使用遞歸算法求兩個(gè)數(shù)字組合功能示例
這篇文章主要介紹了javascript使用遞歸算法求兩個(gè)數(shù)字組合功能,結(jié)合實(shí)例形式分析了JS基于遞歸算法的數(shù)組遍歷、判斷、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
JS結(jié)合WebSocket實(shí)現(xiàn)實(shí)時(shí)雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實(shí)現(xiàn)實(shí)時(shí)、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實(shí)際應(yīng)用場景,x需要的可以參考下2023-11-11
Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用實(shí)例詳解
這篇文章主要介紹了Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用,需要的朋友可以參考下2017-04-04
圖形顯示特效鼠標(biāo)驅(qū)動圖片變化隨機(jī)顯示banner圖片隨意移動圖片定期消失字符連續(xù)消隱文字不停變色JavaScript容錯...圖片循環(huán)顯現(xiàn)QQ菜單生成器圖形顯示特效連續(xù)滾動的圖片圖片水中倒影純JavaScript時(shí)鐘圖片翻滾導(dǎo)航星星滿天閃爍左側(cè)的極酷...2008-04-04
工作需要寫的一個(gè)js拖拽組件，需要的朋友可以參考下代碼。2011-07-07
JavaScript實(shí)現(xiàn)的SHA-1加密算法完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的SHA-1加密算法,以完整實(shí)例形式分析了SHA-1加密算法的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-02-02
JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法
這篇文章主要介紹了JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法,需要的朋友可以參考下2017-07-07
五子棋游戲是一款大家耳熟能詳?shù)囊嬷穷愑螒?下面這篇文章主要給大家介紹了關(guān)于如何使用原生JS快速寫出一個(gè)五子棋小游戲的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06