欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS原生手寫(xiě)輪播圖效果

 更新時(shí)間：2022年08月04日 09:16:33   作者：飯啊飯°  
這篇文章主要為大家詳細(xì)介紹了JS原生手寫(xiě)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS原生手寫(xiě)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

前言

本系列主要整理前端面試中需要掌握的知識(shí)點(diǎn)。本節(jié)介紹如何用原生JS手寫(xiě)輪播圖。

一、手寫(xiě)初級(jí)輪播圖

功能分析

1、初級(jí)輪播圖功能介紹：①左右兩端有左右按鈕；②下方有小球指示當(dāng)前是第幾張圖片；③無(wú)切換效果；④如果兩秒中用戶沒(méi)有點(diǎn)擊輪播圖，則從左到右自動(dòng)播放。
2、功能展示：

實(shí)現(xiàn)思路

HTML中需要包括一個(gè)大盒子class=wrap，為輪播圖的盒子。一張一張的圖片可以用無(wú)序列表存儲(chǔ)，左右按鈕使用button，下方圓點(diǎn)也用無(wú)序列表，并為每一個(gè)圓點(diǎn)設(shè)置計(jì)數(shù)器data-index。HTML的代碼如下：

<div class="wrap">
? ? <ul class="list">
? ? ? ? <li class="item active">0</li>
? ? ? ? <li class="item">1</li>
? ? ? ? <li class="item">2</li>
? ? ? ? <li class="item">3</li>
? ? ? ? <li class="item">4</li>
? ? </ul>
? ? <ul class="pointList">
? ? ? ? <li class="point active" data-index="0"></li>
? ? ? ? <li class="point" data-index="1"></li>
? ? ? ? <li class="point" data-index="2"></li>
? ? ? ? <li class="point" data-index="3"></li>
? ? ? ? <li class="point" data-index="4"></li>
? ? </ul>
? ? <button class="btn" id="leftBtn"><</button>
? ? <button class="btn" id="rightBtn">></button>
</div>

CSS中，給wrap盒子一個(gè)寬高。list盒子和它同寬同高。每一張圖片充滿盒子，并且都用絕對(duì)定位固定在wrap盒子里，讓他們有不同的顏色，初始透明度都是0即全透明，并且，哪個(gè)需要展示，哪個(gè)的z-index就變大，并且透明度改為1。左右按鈕直接使用定位固定在左右兩端，小圓點(diǎn)內(nèi)部使用浮動(dòng)，再用定位固定在下端。

* {
? ? margin: 0;
? ? padding: 0;
? ? list-style: none;
}
/* 輪播圖大盒子 */
.wrap {
? ? width: 800px;
? ? height: 400px;
? ? position: relative;
}
.list{
? ? width: 800px;
? ? height: 400px;
? ? position: relative;
}
/* 每一張圖片 */
.item {
? ? width: 100%;
? ? height: 100%;
? ? position: absolute;
? ? left: 0;
? ? opacity: 0;
}
/* 不同的圖片不同的顏色 */
.item:nth-child(1){
? ? background-color: skyblue;
}
.item:nth-child(2){
? ? background-color: yellowgreen
}
.item:nth-child(3){
? ? background-color: rebeccapurple;
}
.item:nth-child(4){
? ? background-color: pink;
}
.item:nth-child(5){
? ? background-color: orange;
}
.item.active {
? ? opacity: 1;
? ? z-index: 20;
}
/* 按鈕的設(shè)置 */
.btn {
? ? width: 50px;
? ? height: 100px;
? ? position: absolute;
? ? top: 50%;
? ? transform:translate(0,-50%);
? ? z-index: 200;
}
#leftBtn {
? ? left: 0;
}
#rightBtn {
? ? right: 0;
}
/* 小圓點(diǎn)的設(shè)置 */
.pointList {
? ? height: 10px;
? ? position: absolute;
? ? bottom: 20px;
? ? right: 20px;
? ? z-index: 200;
}
.point {
? ? width: 10px;
? ? height: 10px;
? ? background-color: antiquewhite;
? ? float: left;
? ? margin-left: 8px;
? ? border-style: solid;
? ? border-radius: 100%;
? ? border-width: 2px;
? ? border-color: slategray;
}
.point.active {
? ? background-color: cadetblue;
}

JS的實(shí)現(xiàn)思路如下：

1.獲取元素：包括圖片、圓點(diǎn)、按鈕、輪播圖大盒子

2.需要一個(gè)變量index記錄當(dāng)前圖片的索引，并且在每次點(diǎn)擊的時(shí)候要先將樣式清空，再根據(jù)索引重新賦值（排他思想）

3.點(diǎn)擊左右按鈕的時(shí)候，只需要判斷是否為第一張或者最后一張，然后進(jìn)行+1 -1操作即可。

4.點(diǎn)擊小圓點(diǎn)時(shí)，需要記錄點(diǎn)擊的圓點(diǎn)的data-index，賦值給Index，然后再執(zhí)行

5.定義計(jì)時(shí)器，當(dāng)鼠標(biāo)在wrap內(nèi)，就取消計(jì)時(shí)，不在wrap內(nèi)，就開(kāi)始計(jì)時(shí)，兩秒以后自動(dòng)播放。

JS整體代碼：

// 輪播圖圖片
let items = document.querySelectorAll('.item')
// 下方圓點(diǎn)
let points = document.querySelectorAll('.point')
// 左右按鈕
let left = document.querySelector('#leftBtn')
let right = document.querySelector('#rightBtn')
// 輪播圖盒子
let wrap = document.querySelector('.wrap')
// 記錄當(dāng)前展示的是第幾張圖片
var index = 0;
// 移除所有的active
var removeActive = function(){
? ? for(var i=0;i<items.length;i++){
? ? ? ? items[i].className = "item"
? ? }
? ? for(var i=0;i<points.length;i++){
? ? ? ? points[i].className = "point"
? ? }
}
// 為當(dāng)前index加入active
var setActive = function(){
? ? removeActive();
? ? items[index].className = "item active";
? ? points[index].className = "point active";
}
// 點(diǎn)擊左右按鈕觸發(fā)修改index的事件
var goleft = function(){
? ? if(index==0){
? ? ? ? index = 4;
? ? }else{
? ? ? ? index--;
? ? }
? ? setActive();
}
var goright = function(){
? ? if(index==4){
? ? ? ? index = 0;
? ? }else{
? ? ? ? index++;
? ? }
? ? setActive();
} ? ? ? ?

left.addEventListener('click',function(){
? ? goleft();
})
right.addEventListener('click',function(){
? ? goright();
})
// 點(diǎn)擊小圓點(diǎn)
for(var i=0;i<points.length;i++){
? ? points[i].addEventListener('click',function(){
? ? ? ? var pointIndex = this.getAttribute('data-index')
? ? ? ? index = pointIndex;
? ? ? ? setActive();
? ? })
}
//計(jì)時(shí)器
var timer
function play() {
? ? timer = setInterval(() => {
? ? ? ? goright()
? ? }, 2000)
}
play()
//移入清除計(jì)時(shí)器r
wrap.onmouseover = function () {
? ? clearInterval(timer)
}
//移出啟動(dòng)計(jì)時(shí)器
wrap.onmouseleave = function () {
? ? play()
}

二、優(yōu)化輪播圖

增加的功能

1、鼠標(biāo)經(jīng)過(guò)輪播圖再出現(xiàn)左右按鈕；
2、圖片有左右滾動(dòng)的效果，看起來(lái)是連續(xù)的。
3、功能展示：

實(shí)現(xiàn)要點(diǎn)

1.所有的圖片不應(yīng)該疊放，而是應(yīng)該拼接起來(lái)，這個(gè)可以在CSS中修改。

2.因?yàn)槭沁B續(xù)播放，需要拷貝第一張圖片到輪播圖的最后，這樣最后一張到第一張的效果才會(huì)連續(xù)。

3.連續(xù)移動(dòng)的效果是通過(guò)緩動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)的：移動(dòng)的步長(zhǎng)由大到小，最后慢慢停下來(lái)。

最后完整的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <script src="animate.js"></script>
? ? <title>Document</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .wrap {
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .list{
? ? ? ? ? ? width: 600%;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left:0;
? ? ? ? }
? ? ? ? .item {
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .item:nth-child(1){
? ? ? ? ? ? background-color: skyblue;
? ? ? ? }
? ? ? ? .item:nth-child(2){
? ? ? ? ? ? background-color: yellowgreen
? ? ? ? }
? ? ? ? .item:nth-child(3){
? ? ? ? ? ? background-color: rebeccapurple;
? ? ? ? }
? ? ? ? .item:nth-child(4){
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? ? ? .item:nth-child(5){
? ? ? ? ? ? background-color: orange;
? ? ? ? }
? ? ? ? .item:nth-child(6){
? ? ? ? ? ? background-color: skyblue;
? ? ? ? }
? ? ? ? /* .item.active {
? ? ? ? ? ? opacity: 1;
? ? ? ? ? ? z-index: 20;
? ? ? ? } */
? ? ? ? .btn {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? transform:translate(0,-50%);
? ? ? ? ? ? z-index: 200;
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ? #leftBtn {
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? ? ? #rightBtn {
? ? ? ? ? ? right: 0;
? ? ? ? }

? ? ? ? .pointList {
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? bottom: 20px;
? ? ? ? ? ? right: 20px;
? ? ? ? ? ? z-index: 200;
? ? ? ? }
? ? ? ? .point {
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? background-color: antiquewhite;
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin-left: 8px;
? ? ? ? ? ? border-style: solid;
? ? ? ? ? ? border-radius: 100%;
? ? ? ? ? ? border-width: 2px;
? ? ? ? ? ? border-color: slategray;
? ? ? ? }
? ? ? ? .point.active {
? ? ? ? ? ? background-color: cadetblue;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="wrap">
? ? ? ? <ul class="list">
? ? ? ? ? ? <li class="item">0</li>
? ? ? ? ? ? <li class="item">1</li>
? ? ? ? ? ? <li class="item">2</li>
? ? ? ? ? ? <li class="item">3</li>
? ? ? ? ? ? <li class="item">4</li>
? ? ? ? </ul>
? ? ? ? <ul class="pointList">
? ? ? ? ? ? <li class="point active" data-index="0"></li>
? ? ? ? ? ? <li class="point" data-index="1"></li>
? ? ? ? ? ? <li class="point" data-index="2"></li>
? ? ? ? ? ? <li class="point" data-index="3"></li>
? ? ? ? ? ? <li class="point" data-index="4"></li>
? ? ? ? </ul>
? ? ? ? <button class="btn" id="leftBtn"><</button>
? ? ? ? <button class="btn" id="rightBtn">></button>
? ? </div>
? ? <script>
? ? ? ? /* 1.獲取元素 */
? ? ? ? // 整個(gè)輪播圖范圍
? ? ? ? let wrap = document.querySelector('.wrap')
? ? ? ? let ul = document.querySelector('.list')
? ? ? ? // 輪播圖圖片
? ? ? ? let items = document.querySelectorAll('.item')
? ? ? ? // 下方圓點(diǎn)
? ? ? ? let points = document.querySelectorAll('.point')
? ? ? ? // 左右按鈕
? ? ? ? let left = document.querySelector('#leftBtn')
? ? ? ? let right = document.querySelector('#rightBtn')
? ? ? ? var focusWidth = wrap.offsetWidth;
? ? ? ? /* 2.鼠標(biāo)經(jīng)過(guò)輪播圖，左右按鈕出現(xiàn)，離開(kāi)則按鈕消失 */
? ? ? ? wrap.addEventListener('mouseenter',function(){
? ? ? ? ? ? left.style.display = 'block'
? ? ? ? ? ? right.style.display = 'block'
? ? ? ? });
? ? ? ? wrap.addEventListener('mouseleave',function(){
? ? ? ? ? ? left.style.display = 'none'
? ? ? ? ? ? right.style.display = 'none'
? ? ? ? })
? ? ? ? ?/* 3.克隆第一張圖片放到ul最后面 */
? ? ? ? ?var first = ul.children[0].cloneNode(true)
? ? ? ? ?ul.appendChild(first)
? ? ? ? ?items = document.querySelectorAll('.item')

? ? ? ? /* 4. 記錄當(dāng)前展示的是第幾張圖片 */
? ? ? ? var index = 0;
? ? ? ? /* 5.移除所有的active */
? ? ? ? var removeActive = function(){
? ? ? ? ? ? for(var i=0;i<items.length;i++){
? ? ? ? ? ? ? ? items[i].className = "item"
? ? ? ? ? ? }
? ? ? ? ? ? for(var i=0;i<points.length;i++){
? ? ? ? ? ? ? ? points[i].className = "point"
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? /* 6.為當(dāng)前index加入active */
? ? ? ? var setActive = function(){
? ? ? ? ? ? removeActive();
? ? ? ? ? ? // ul.style.left = -(index*focusWidth) + 'px'
? ? ? ? ? ? animate(ul, -index * focusWidth);
? ? ? ? ? ? // console.log(index);
? ? ? ? ? ? // console.log(ul.style.left);
? ? ? ? ? ? if(index==5) {
? ? ? ? ? ? ? ? points[0].className = "point active";
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? points[index].className = "point active";
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? /* 7.點(diǎn)擊左右按鈕觸發(fā)修改index的事件 */
? ? ? ? var goleft = function(){
? ? ? ? ? ? if(index==0){
? ? ? ? ? ? ? ? index = 5;
? ? ? ? ? ? ? ? ul.style.left = "-4000px";
? ? ? ? ? ? }
? ? ? ? ? ? index--;
? ? ? ? ? ? setActive();
? ? ? ? }
? ? ? ? var goright = function(){
? ? ? ? ? ? if(index==5){
? ? ? ? ? ? ? ? index = 0;
? ? ? ? ? ? ? ? ul.style.left = 0;
? ? ? ? ? ? }
? ? ? ? ? ? index++;
? ? ? ? ? ? setActive();
? ? ? ? } ? ? ? ?

? ? ? ? left.addEventListener('click',function(){
? ? ? ? ? ? goleft();
? ? ? ? })
? ? ? ? right.addEventListener('click',function(){
? ? ? ? ? ? goright();
? ? ? ? })
? ? ? ? /* 8.點(diǎn)擊圓點(diǎn)更改輪播圖 */
? ? ? ? for(var i=0;i<points.length;i++){
? ? ? ? ? ? points[i].addEventListener('click',function(){
? ? ? ? ? ? ? ? var pointIndex = this.getAttribute('data-index')
? ? ? ? ? ? ? ? index = pointIndex;
? ? ? ? ? ? ? ? setActive();
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? /* 9.計(jì)時(shí)器 */
? ? ? ? var timer
? ? ? ? function play() {
? ? ? ? ? ? timer = setInterval(() => {
? ? ? ? ? ? ? ? goright()
? ? ? ? ? ? }, 2000)
? ? ? ? }
? ? ? ? play()
? ? ? ? //移入清除計(jì)時(shí)器r
? ? ? ? wrap.onmouseover = function () {
? ? ? ? ? ? clearInterval(timer)
? ? ? ? }
? ? ? ? //移出啟動(dòng)計(jì)時(shí)器
? ? ? ? wrap.onmouseleave = function () {
? ? ? ? ? ? play()
? ? ? ? }
? ? ? ??
? ? </script>
</body>
</html>

三、繼續(xù)優(yōu)化思路

1、下方小圓點(diǎn)根據(jù)圖片個(gè)數(shù)自動(dòng)生成；
2、利用節(jié)流控制左右切換的速度。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論