用js實(shí)現(xiàn)簡(jiǎn)單輪播圖
更新時(shí)間：2022年07月03日 13:16:39 作者：阿旋要畢業(yè)~
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)簡(jiǎn)單輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
1.實(shí)現(xiàn)功能：
2.實(shí)現(xiàn)思路：
（1）鼠標(biāo)放到圖片上，顯示箭頭，用display來(lái)做。
（2）動(dòng)態(tài)生成小圓圈。
（3）小圓圈的排他思想
（4）點(diǎn)擊小圓圈滾動(dòng)圖片
設(shè)置自定義屬性：this.setAttribute(name, value);
獲取自定義屬性：this.getAttribute(name,value);
（5）點(diǎn)擊右按鈕，滾動(dòng)一張圖片（學(xué)習(xí)無(wú)縫滾動(dòng)原理）
（6）克隆第一張圖片放到圖片最后面
li.cloneNode(true) 設(shè)置為true為深拷貝。
（7）點(diǎn)擊右側(cè)按鈕時(shí)，小圓圈也做相應(yīng)地改變
（8）解決bug，點(diǎn)擊小圓圈時(shí)，要更新num和circle值
（9）寫左側(cè)按鈕
（10）自動(dòng)播放功能
（11）節(jié)流閥
防止因?yàn)辄c(diǎn)擊過快，輪播圖滾動(dòng)過快。
代碼：
（1）html+css
<!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">
? ? <title>輪播圖</title>
? ? <style>
? ? ? ? body {
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? .focus {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? ? ? ul {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 2000px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? ul>li {
? ? ? ? ? ? float: left;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ?
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 300px;
? ? ? ? }
? ? ? ? a {
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border-radius: 70%;
? ? ? ? ? ? background-color: rgb(137, 132, 146,0.3);
? ? ? ? ? ? color:darkgrey;
? ? ? ? ? ? font-weight:bolder;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? z-index: 1;
? ? ? ? }
? ? ? ? .arrow-l {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: -40px;
? ? ? ? ? ? top: 140px;
? ? ? ? ? ? text-align: right;
?
? ? ? ? }
? ? ? ? .arrow-r {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: -40px;
? ? ? ? ? ? top: 140px;
? ? ? ? }
? ? ? ? .circle {
? ? ? ? ? ? display: block;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 250px;
? ? ? ? ? ? left:150px;
? ? ? ? ? ? width: 60px;
? ? ? ? ? ? height: 20px;
? ? ? ? ? ? line-height: 20px;
? ? ? ? ? ?
?
? ? ? ? }
? ? ? ? ol>li {
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 15px;
? ? ? ? ? ? height: 15px;
? ? ? ? ? ? list-style: circle;
? ? ? ? ? ? color: white;
? ? ? ? ? ? font-size: 25px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ??
? ? ? ? }
? ? ? ? .current {
? ? ? ? ? ? list-style: disc;
? ? ? ? ? ? color: orange;
? ? ? ? }
? ? ? ? img {
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 300px;
? ? ? ? }
? ? </style>
? ? <script src="animate.js"></script>
? ? <script src="輪播圖.js"></script>
</head>
<body>
? ? ? ? ? ? <div class="focus">
? ? ? ? ? ? ? ? <!-- 左右側(cè)按鈕 -->
? ? ? ? ? ? ? ? <a href="javascript:;" class="arrow-l">←</a>
? ? ? ? ? ? ? ? <a href="javascript:;" class="arrow-r">→</a>
?
? ? ? ? ? ? ? ? <!-- 圖片 -->
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ?<img src="../images/bg1.jpg" alt="">
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <img src="../images/bg2.jpg" alt="">
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <img src="../images/bg3.jpg" alt="">
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <img src="../images/bg4.jpg" alt="">
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
?
? ? ? ? ? ? ? ? <!-- 小圓點(diǎn) -->
? ? ? ? ? ? ? ? <ol class = "circle">
?
? ? ? ? ? ? ? ? </ol>
? ? ? ? ? ? </div>
</body>
</html>（2）js
window.addEventListener('load', function(){?
? ? // 1.鼠標(biāo)放到圖片上，顯示箭頭
? ? var focuss = document.querySelector('.focus');
? ? var arrowL = document.querySelector('.arrow-l');
? ? var arrowR = document.querySelector('.arrow-r');
? ? var num = 0;
? ? var circle = 0;
? ? // 10.自動(dòng)播放輪播圖.(比較像右側(cè)按鈕)
? ? var timer = setInterval(function() {
? ? ? ? // 手動(dòng)調(diào)用點(diǎn)擊事件
? ? ? ? arrowR.click()
? ? },2000);
?
? ? focuss.addEventListener('mouseover', function() {
? ? ? ? arrowL.style.display = 'block';
? ? ? ? arrowR.style.display = 'block';
? ? ? ? // 鼠標(biāo)經(jīng)過,清除定時(shí)器.
? ? ? ? clearInterval(timer);
? ? ? ? timer = null;
? ? });
? ? focuss.addEventListener('mouseout', function() {
? ? ? ? arrowL.style.display = 'none';
? ? ? ? arrowR.style.display = 'none';
? ? ? ? // 鼠標(biāo)離開,打開定時(shí)器
? ? ? ? timer = setInterval(function() {
? ? ? ? ? ? // 手動(dòng)調(diào)用點(diǎn)擊事件
? ? ? ? ? ? arrowR.click()
? ? ? ? },2000);
? ? });
? ? // 2.動(dòng)態(tài)生成小圓圈.(主要涉及到節(jié)點(diǎn)操作.)
? ? var lis = focuss.querySelector('ul').querySelectorAll('li');
? ? var ol = focuss.querySelector('ol');
? ? var focusWidth = lis[0].clientWidth;
? ? for(var i = 0; i < lis.length; i++) {
? ? ? ? var li = document.createElement('li');
? ? ? ? // 記錄當(dāng)前小圓圈的索引號(hào),通過自定義屬性來(lái)做.
? ? ? ? li.setAttribute('index', i);
? ? ? ? ol.appendChild(li);
? ? ? ? // 3.小圓圈的排他思想:在生成小圓圈的同時(shí),直接綁定點(diǎn)擊事件.
? ? ? ? li.addEventListener('click', function(){
? ? ? ? ? ? // 除了當(dāng)前l(fā)i,其他li都清除掉類名
? ? ? ? ? ? for(var j = 0; j < ol.children.length; j++) {
? ? ? ? ? ? ? ? ol.children[j].className = '';
? ? ? ? ? ? }
? ? ? ? ? ? this.className = 'current';
? ? ? ? ? ? // 4.點(diǎn)擊小圓圈,滾動(dòng)圖片
? ? ? ? ? ? var index = this.getAttribute('index');
? ? ? ? ? ? num = index;
? ? ? ? ? ? circle = index;
? ? ? ? ? ? animate(ul, -(focusWidth * index));
? ? ? ? });
?
? ? }
? ? // 把ol中的第一個(gè)孩子的類名設(shè)置成current
? ? ol.children[0].className = 'current';
? ? // 2.鼠標(biāo)點(diǎn)擊按鈕，顯示不同的圖片。
? ? var ul = focuss.querySelector('ul');
? ? // 6.克隆第一張圖片放到圖片最后面
? ? var first = ul.children[0].cloneNode(true); // true為深克隆
? ? ul.appendChild(first);
? ? var flag = true; ?//設(shè)置節(jié)流閥.
? ? arrowR.addEventListener('click', function(){
? ? ? ? // 無(wú)縫滾動(dòng)
? ? ? ? if(flag) {
? ? ? ? ? ? flag = false;
? ? ? ? ? ? if(num == ul.children.length-1) {
? ? ? ? ? ? ? ? ul.style.left = 0;
? ? ? ? ? ? ? ? num = 0;
? ? ? ? ? ? }
? ? ? ? ? ? num++;
? ? ? ? ? ? animate(ul,-(focusWidth * num), function() { ?//利用callback,開啟節(jié)流閥.
? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? });
? ? ? ? ? ? // 點(diǎn)擊時(shí),小圓圈也做響應(yīng)的修改.
? ? ? ? ? ? circle++;
? ? ? ? ? ? if(circle == ol.children.length) {
? ? ? ? ? ? ? ? circle = 0;
? ? ? ? ? ? }
? ? ? ? ? ? circleChange();
? ? ? ? }?
? ? });
? ? arrowL.addEventListener('click', function(){
? ? ? ? if(flag = true) {
? ? ? ? ? ? flag = false;
? ? ? ? ? ? if(num == 0) {
? ? ? ? ? ? ? ? ul.style.left = -(focusWidth * (ul.children.length -1 ) +'px');
? ? ? ? ? ? ? ? num = ul.children.length -1 ;
? ? ? ? ? ? }
? ? ? ? ? ? num--;
? ? ? ? ? ? animate(ul,-(focusWidth * num), function() {
? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? });
? ? ? ? ? ? // 點(diǎn)擊時(shí),小圓圈也做響應(yīng)的修改.
? ? ? ? ? ? circle--;
? ? ? ? ? ? if(circle == -1) {
? ? ? ? ? ? ? ? circle = ol.children.length-1;
? ? ? ? ? ? }
? ? ? ? ? ? circleChange();
? ? ? ? }
? ? ? ??
? ? });
?
? ? function circleChange(){
? ? ? ? for(var i = 0; i < ol.children.length; i++) {
? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? }
? ? ? ? ol.children[circle].className = 'current';
? ? }
? ??
?
})（3）緩動(dòng)畫函數(shù)
function animate(obj, target, callback) {
? ? clearInterval(obj.timer);
? ? obj.timer = setInterval(function(){
? ? ? ? var step = (target - obj.offsetLeft) / 10;
? ? ? ? step = step > 0 ? Math.ceil(step) : Math.floor(step);
? ? ? ? if(obj.offsetLeft == target) {
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? // if(callback) {
? ? ? ? ? ? // ? ? callback();
? ? ? ? ? ? // }
? ? ? ? ? ? call && callback();
? ? ? ? }
? ? ? ? obj.style.left = obj.offsetLeft + step + 'px';
? ? },30)
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS 仿騰訊發(fā)表微博的效果代碼，有需要的朋友參考一下2013-12-12
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)星星閃爍效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
IScroll5實(shí)現(xiàn)下拉刷新上拉加載的功能實(shí)例
本篇文章主要介紹了IScroll5實(shí)現(xiàn)下拉刷新上拉加載的功能實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-08-08
微信小程序之滑動(dòng)頁(yè)面隱藏和顯示組件功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序之滑動(dòng)頁(yè)面隱藏和顯示組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
動(dòng)態(tài)調(diào)整textarea中字體的大小代碼
用js批量輸出select事件控制textarea中字體的大小的代碼。2009-12-12
本文介紹了利用Array.prototype.sort方法和Math.random()實(shí)現(xiàn)快速打亂數(shù)組的方法，大家參考使用吧2014-01-01
JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集（多種實(shí)現(xiàn)方式）
本文通過多種實(shí)現(xiàn)方式給大家介紹了JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集 的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
強(qiáng)悍無(wú)比的WEB開發(fā)好助手FireBug(Firefox Plugin)
強(qiáng)悍無(wú)比的WEB開發(fā)好助手FireBug(Firefox Plugin)...2007-01-01
這篇文章主要介紹了javascript匿名函數(shù),以實(shí)例形式詳細(xì)分析了javascript匿名函數(shù)的定義、用法及注意事項(xiàng),具有很好的學(xué)習(xí)借鑒價(jià)值,需要的朋友可以參考下2014-11-11
return false,對(duì)阻止事件默認(rèn)動(dòng)作的一些測(cè)試代碼
很明顯我們每個(gè)函數(shù)都返回false,如果返回值可以阻止事件默認(rèn)動(dòng)作，那么文本框?qū)o(wú)法輸入任何內(nèi)容。 看下面我測(cè)試的結(jié)果，注意紅的部分。2010-11-11