原生JS實(shí)現(xiàn)pc端輪播圖效果
更新時(shí)間：2020年12月21日 10:17:56 作者：qq_15198465
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)pc端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)pc端輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
案例：輪播圖需求
布局：ul下有很多l(xiāng)i標(biāo)簽；浮動(dòng)在一行；
原理：切換圖片的時(shí)候，把ul位置修改一下，給ul的父容器，設(shè)置一個(gè) overflow:hidden；
功能需求：
- 序號(hào)輪播
- 左右按鈕的輪播
- 自動(dòng)輪播
- 鼠標(biāo)在輪播圖里面的時(shí)候，停止自動(dòng)輪播，離開后繼續(xù)自動(dòng)輪播
實(shí)現(xiàn)效果：
html部分
<div class="box" id="box">
<div class="inner" id="inner">
<ul id="imglist">
<li>
<a href="#" ><img src="images/1.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images/2.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images/3.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images/4.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images/5.jpg" alt=""></a>
</li>
<li>
<a href="#" ><img src="images/6.jpg" alt=""></a>
</li>
</ul>
<div class="list">
<i class="current">1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
<i>6</i>
</div>
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
</div>
css部分
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 730px;
height: 454px;
padding: 8px;
border: 1px solid green;
margin: 100px auto;
}
.inner {
position: relative;
overflow: hidden;
height: 454px;
}
#imglist {
width: 700%;
position: absolute;
left: 0;
transition: left 300ms linear;
}
li {
float: left;
}
.list {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -85px;
}
.list i {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
color: #333;
float: left;
font-style: normal;
line-height: 20px;
font-size: 14px;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.list i:last-child {
margin-right: 0;
}
.list i.current {
background-color: skyblue;
color: #fff;
}
.arrow {
position: absolute;
width: 100%;
top: 50%;
margin-top: -30px;
}
.arrow-left,
.arrow-right {
width: 30px;
height: 60px;
position: absolute;
font: 20px/60px "consolas";
color: #fff;
background-color: rgba(0, 0, 0, .3);
text-align: center;
cursor: pointer;
}
.arrow-right {
right: 0;
}
js部分：
// 獲取DOM
var yuan = document.querySelectorAll("i");
var li = document.querySelector("ul li");
var ul = document.querySelector("ul");
var imgs = document.querySelector("#imglist");
var right = document.querySelector(".arrow-right");
var left = document.querySelector(".arrow-left");
var box = document.querySelector(".box");
window.onload = function() {
//------------------------------------這里是點(diǎn)擊小圓圈，控制圖片的切換
//循環(huán)小圓點(diǎn) 注冊(cè)小圓點(diǎn)
for (var i = 0; i < yuan.length; i++) {
//我們需要這里面的i 必須提前拿出來，要不最后i的值就是最后一個(gè)數(shù)值了
yuan[i].num = i;
//注冊(cè)事件
yuan[i].onmouseover = function() {
// 現(xiàn)在要循環(huán)將樣式移除
for (var j = 0; j < yuan.length; j++) {
yuan[j].classList.remove("current");
}
//這里是為了將點(diǎn)擊的小圓點(diǎn) 增加上樣式
this.classList.add("current");
var num = this.num;
//到這里的思路就是點(diǎn)擊小圓點(diǎn) 將圖片進(jìn)行移動(dòng)，向左面移動(dòng)，上面css做了相應(yīng)的定位操作
//移動(dòng)的距離就是 n 乘以 一張圖片的寬度，
//n 就是選擇的小圓點(diǎn)的 坐標(biāo)-----i(num)
//圖片的寬度 box.offsetWidth
var left = num * li.offsetWidth;
// console.log(num, box.offsetWidth, left);
imgs.style.left = `-${left}px`;
//這里小原點(diǎn)聯(lián)動(dòng)左右按鈕
for (var p = 0; p < yuan.length; p++) {
//清除全部樣式（小圓點(diǎn)）
yuan[p].classList.remove("current");
}
//給當(dāng)前的小圓點(diǎn)增加樣式
yuan[num].classList.add("current");
//這里這個(gè)位置比較關(guān)鍵，在上面設(shè)置完樣式之后，記得將此num賦值給全局的index
index = this.num;
}
}
//------------------------------------以上是點(diǎn)擊小圓圈，控制圖片的切換
//------------------------------------下面是開始右面輪播，控制圖片的切換
//首先定義一個(gè)全局的index，這個(gè)index的作用依舊是控制圖片的切換
var index = 0;
right.onclick = function() {
index++;
//這里要對(duì)index做一下判斷，如果不做判斷，可以試想一下，
//只要你一點(diǎn)擊，index就會(huì)無限的增大，增大到你“無法自拔”
if (index == ul.children.length) {
//如果坐標(biāo)為6的話，顯示應(yīng)該顯示第1張圖片，所以要復(fù)位 即index=0
index = 0;
}
var left = index * li.offsetWidth;
// console.log(index, box.offsetWidth, left);
imgs.style.left = `-${left}px`;
//點(diǎn)擊右面增加聯(lián)動(dòng)小圓點(diǎn)的效果
for (var n = 0; n < yuan.length; n++) {
//清除全部樣式（小圓點(diǎn)）
yuan[n].classList.remove("current");
}
//給當(dāng)前的小圓點(diǎn)增加樣式
yuan[index].classList.add("current");
};
//------------------------------------以上是結(jié)束右面輪播，控制圖片的切換
//------------------------------------下面是開始左面輪播，控制圖片的切換
left.onclick = function() {
index--;
//這里同右點(diǎn)擊一樣，需要做一下判斷，
console.log(index);
if (index == -1) {
index = ul.children.length - 1;
}
var left = index * li.offsetWidth;
// console.log(index, box.offsetWidth, left);
// console.log(left);
imgs.style.left = `-${left}px`;
//這個(gè)位置做的是 左面點(diǎn)擊聯(lián)動(dòng)小圓點(diǎn)
for (var m = 0; m < yuan.length; m++) {
//清除全部樣式（小圓點(diǎn)）
yuan[m].classList.remove("current");
}
//給當(dāng)前的小圓點(diǎn)增加樣式
yuan[index].classList.add("current");
};
//------------------------------------上面是結(jié)束左面輪播，控制圖片的切換
//------------------------------------開始設(shè)置自動(dòng)輪播
var timer = setInterval(function() {
right.onclick();
}, 1000);
//------------------------------------以上是自動(dòng)輪播結(jié)束
//------------------------------------設(shè)置鼠標(biāo)進(jìn)來就停止開始
box.onmouseover = function() {
clearInterval(timer);
};
//------------------------------------設(shè)置鼠標(biāo)進(jìn)來就停止結(jié)束
//------------------------------------設(shè)置鼠標(biāo)出去就停止開始
box.onmouseout = function() {
timer = setInterval(function() {
right.onclick();
}, 1000);
};
//------------------------------------設(shè)置鼠標(biāo)出去就停止結(jié)束
}
未完待續(xù)，本篇文章做的PC端的處理，目前從6頁-1頁，1頁到6頁還有點(diǎn)小瑕疵，會(huì)及時(shí)更新上的，其他功能一切正常，歡迎大家評(píng)論
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)輪播圖的完整代碼
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼
- JS實(shí)現(xiàn)左右無縫輪播圖代碼
- JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
- 原生js實(shí)現(xiàn)無限循環(huán)輪播圖效果
- 使用html+js+css 實(shí)現(xiàn)頁面輪播圖效果(實(shí)例講解)
- 基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
相關(guān)文章
js Canvas實(shí)現(xiàn)圓形時(shí)鐘教程
這篇文章主要為大家詳細(xì)介紹了HTML5 Canvas實(shí)現(xiàn)圓形時(shí)鐘簡(jiǎn)易教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Javascript - HTML的request類...2006-07-07
JavaScript 中定義函數(shù)用 var foo = function () {} 和 function foo()區(qū)
這篇文章主要介紹了JavaScript 中定義函數(shù)用 var foo = function () {} 和 function foo()區(qū)別介紹,需要的朋友可以參考下2018-03-03
js實(shí)現(xiàn)的類似QQ的等級(jí)的代碼
類似QQ等級(jí)2008-09-09
js實(shí)現(xiàn)簡(jiǎn)單的星級(jí)選擇器提交效果適用于評(píng)論等
星級(jí)選擇器在網(wǎng)上會(huì)搜到很多類似的代碼，不過實(shí)現(xiàn)起來相對(duì)比較復(fù)雜，在本文將為大家介紹的是使用js簡(jiǎn)單的實(shí)現(xiàn)下，感興趣的朋友不要錯(cuò)過2013-10-10
js事件源window.event.srcElement兼容性寫法(詳解)
下面小編就為大家?guī)硪黄猨s事件源window.event.srcElement兼容性寫法(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了JavaScript中數(shù)組添加值和訪問值常見問題的相關(guān)資料2016-02-02
js 截取或者替換字符串中的數(shù)字實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 截取或者替換字符串中的數(shù)字實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
在javascript前端開發(fā)中js函數(shù)問題經(jīng)常會(huì)被討論，這個(gè)問題仁者見仁智者見智，下面通過示例代碼給大家介紹js五大常見函數(shù)，感興趣的朋友一起看看吧2018-03-03
label標(biāo)簽在JS和Jquery中使用不能像其他標(biāo)簽一樣用value獲取它的值，下面有個(gè)不錯(cuò)的示例，希望大家可以學(xué)習(xí)下2014-01-01