js實現輪播圖常規類（原生JS，沒有任何框架）

時間  2019-11-13
標籤 實現 常規 原生 沒有 任何 框架 欄目 JavaScript 简体版
原文   原文鏈接

//如下是JS文件中的須要用的函數  可自行封裝javascript

function startMove(obj, json, fnend) {

    clearInterval(obj.timer); //防止定時器疊加
    obj.timer = setInterval(function () {

        var istrue = true;

        //1.獲取屬性名，獲取鍵名：屬性名->初始值
        for (var key in json) { //key:鍵名 json[key] :鍵值
            //          console.log(key); //width heigth opacity
            var cur = 0; //存初始值

            if (key == 'opacity') { //初始值
                cur = getstyle(obj, key) * 100; //透明度
            } else {
                cur = parseInt(getstyle(obj, key)); // 300px 300 width heigth borderwidth px爲單位的

            }

            //2.根據初始值和目標值，進行判斷肯定speed方向，變形：緩衝運動
            //距離越大，速度越大,下面的公式具有方向
            var speed = (json[key] - cur) / 6; //出現小數
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //不要小數部分，沒有這句話或晃動

            if (cur != json[key]) { //width 200 heigth 400
                istrue = false; //若是沒有達到目標值，開關false
            } else {
                istrue = true; //true true
            }

            //三、運動
            if (key == 'opacity') {
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
            } else {
                obj.style[key] = cur + speed + 'px'; //針對普通屬性 left top height
            }

        }

        //4.回調函數:準備一個開關,確保以上json全部的屬性都已經達到目標值,才能調用這個回調函數
        if (istrue) { //若是爲true,證實以上屬性都達到目標值了
            clearInterval(obj.timer);
            if (fnend) {
                fnend();//調用函數
            }
        }

    }, 50); //obj.timer 每一個對象都有本身定時器

}
 
 
 
 
 
//如下是代碼操做
 
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

/*圖片的樣式*/

#box,
#box2 {
width: 500px;
height: 300px;
background: #d8d8d8;
margin: 100px auto;
position: relative;
overflow: hidden;
}

.imglist {
width: 500px;
height: 300px;
}

.imglist li {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 40px;
color: red;
}

.imglist li img {
width: 100%;
height: 100%;
}

.imglist li:nth-child(1) {
background: #0088CC;
}

.imglist li:nth-child(2) {
background: lemonchiffon;
}

.imglist li:nth-child(3) {
background: lavenderblush;
}

.imglist li:nth-child(4) {
background: lightcoral;
}

.imglist li:nth-child(5) {
background: lightcyan;
}

.imglist li:nth-child(6) {
background: lightgreen;
}

/*焦點樣式*/

.light {
width: 500px;
height: 20px;
position: absolute;
left: 0;
bottom: 10px;
/*background: #ccc;*/
text-align: center;
}

.light span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #d8d8d8;
font-size: 14px;
text-align: center;
line-height: 20px;
cursor: pointer;
/*讓焦點的文字消失的方法*/
/*text-indent: -9999px;
    overflow: hidden;*/
}

.light span.active {
background: orangered;
}

.light span.liang {
background: lightcoral;
}

/*左右按鈕樣式*/

.posibtn {
width: 500px;
height: 50px;
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
/*background: #ccc;*/
}

.posibtn p {
width: 50px;
height: 50px;
background: rgb(98, 155, 199);
cursor: pointer;
position: absolute;
top: 0;
font-size: 50px;
color: #fff;
text-align: center;
line-height: 50px;
opacity: 0.3;
}

.posibtn p::selection {
background: transparent;
}

.posibtn p:nth-child(1) {
left: 10px;
}

.posibtn p:nth-child(2) {
right: 10px;
}
</style>
<script src="./common.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
輪播圖寫法步驟：
- 全部的圖片放在右側
- 開啓定時器自動輪播：舊圖挪走，新圖進入
- 點擊左右按鈕能夠切換
- 焦點跟隨
- 點擊焦點也能夠切換對應的圖片
*/

window.onload = function () {
//  alert(1232);
var box = document.getElementById('box');
var imglist = box.children[0];//div
var light = box.children[1];//焦點
var posibtn = box.children[2];//按鈕
var prevbtn = posibtn.children[0];//上一張
var nextbtn = posibtn.children[1];//下一張
var lis = imglist.getElementsByTagName('li');
var iw = lis[0].offsetWidth;//運動距離
var now = 0;//當前可視區圖片的下標

//1.全部的圖片放在右側
for (var li of lis) {
li.style.left = iw + 'px';
}
lis[0].style.left = 0;//第一張放可視區


//2.開啓定時器自動輪播
var timer = null;

function next() {//下一張
//      console.log(now++);
//舊圖挪走:左側
startMove(lis[now], { 'left': -iw });//0
//新圖進入可視區：
now = ++now >= lis.length ? 0 : now;//自增，這句話以前的就是舊圖，這句話以後的就是新圖
lis[now].style.left = iw + 'px';//放在右側 1
startMove(lis[now], { 'left': 0 });
lightMove();//焦點跟隨
}

function prev() {//上一張
//舊圖挪走:右側
startMove(lis[now], { 'left': iw });
//新圖快速放在左側再挪到可視區
now = --now <= -1 ? lis.length - 1 : now;
lis[now].style.left = -iw + 'px';
startMove(lis[now], { 'left': 0 });
lightMove();//焦點跟隨
}

timer = setInterval(next, 2000);//每隔兩秒鐘切換一個圖片



//3.點擊左右按鈕能夠切換

//鼠標移入中止運動

box.onmouseover = function () {
clearInterval(timer);
}

//鼠標移開繼續運動
box.onmouseout = function () {
timer = setInterval(next, 3000);
}

//另類的需求：點擊切換圖片的時候：若是兩次點擊的時間間隔過短，讓第二次點擊無效

//下一張
var oldtime = new Date();
nextbtn.onclick = function () {
if (new Date() - oldtime >= 800) {
next();
}
oldtime = new Date();
}

//上一張
prevbtn.onclick = function () {
prev();
}

//4.焦點跟隨
//建立焦點
var html = '';
for (var i = 0; i < lis.length; i++) {
html += '<span>' + (i + 1) + '</span>';
}
light.innerHTML = html;
light.children[0].className = 'active';

function lightMove() {
//排他
for (var i = 0; i < lis.length; i++) {
light.children[i].className = '';
}
light.children[now].className = 'active';
}


//5.點擊焦點切換到對應的圖片

//事件委託
//  light.onclick = function(ev) {
//      if(ev.target.tagName.toLowerCase() == 'span') {
//          //判斷點擊的是哪一個
//          for(var i = 0; i < light.children.length; i++) {
//              if(ev.target == light.children[i]) {
//                  console.log(i);
//              }
//          }
//      }
//  }

//es6
for (let i = 0; i < light.children.length; i++) {
light.children[i].onclick = function () {
//          console.log(i);
var index = i;//點擊的當前焦點的下標
if (index > now) {
//從右邊切入新圖
//舊圖：放到左邊
startMove(lis[now], { 'left': -iw });
//新圖：快速放在右側，再挪到可視區
lis[index].style.left = iw + 'px';
}
if (index < now) {
//從左邊切入新圖
//舊圖：放到右邊
startMove(lis[now], { 'left': iw });
//新圖：快速放在左側，再挪到可視區
lis[index].style.left = -iw + 'px';
//              startMove(lis[index],{'left' : 0});
}
startMove(lis[index], { 'left': 0 });
//新圖變舊圖
now = index;
lightMove();//焦點跟隨
}
}

}

</script>
</head>

<body>
<div id="box">
<!--圖片列表-->
<div class="imglist">
<ul>
<li>
<img src="./img/1.jpg" alt="">
</li>
<li>
<img src="./img/2.jpg" alt="">
</li>
<li>
<img src="./img/3.jpg" alt="">
</li>
<li>
<img src="./img/4.jpg" alt="">
</li>
<li>
<img src="./img/5.jpg" alt="">
</li>
<li>
<img src="./img/6.jpg" alt="">
</li>
</ul>
</div>
<!--焦點圖-->
<p class="light">
<!--<span class="active">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>-->
</p>
<!--上下按鈕-->
<div class="posibtn">
<p class="prev">&lt;</p>
<p class="next">&gt;</p>
</div>
</div>
</body>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程