js實現輪播圖，模擬flash上下滾動（原生JS，沒有任何框架）

時間  2019-11-13
標籤 實現 模擬 flash 上下 滾動 原生 沒有 任何 框架 欄目 JavaScript 简体版
原文   原文鏈接
//如下是須要用到的js  最好封裝

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();//調用函數
            }
        }

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

}
 
 
//如下是實現代碼
 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: #666;
}

ul {
padding: 0;
margin: 0;
}

li {
list-style: none;
}

img {
border: 0;
}

.play {
width: 400px;
height: 430px;
margin: 50px auto 0;
background: #999;
font: 12px Arial;
}

.big_pic {
width: 400px;
height: 320px;
overflow: hidden;
border-bottom: 1px solid #ccc;
background: #222;
position: relative;
}

.big_pic li {
width: 400px;
height: 320px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: url(../images/loading.gif) no-repeat center center;
}

.mark_left {
width: 200px;
height: 320px;
position: absolute;
left: 0;
top: 0;
background: red;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 3000;
}

.mark_right {
width: 200px;
height: 320px;
position: absolute;
left: 200px;
top: 0;
background: green;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 3000;
}

.big_pic .prev {
width: 60px;
height: 60px;
background: url(../images/btn.gif) no-repeat;
position: absolute;
top: 130px;
left: 10px;
z-index: 3001;
cursor: pointer;
filter: alpha(opacity: 0);
opacity: 0;
}

.big_pic .next {
width: 60px;
height: 60px;
background: url(../images/btn.gif) no-repeat 0 -60px;
position: absolute;
top: 130px;
right: 10px;
z-index: 3001;
cursor: pointer;
filter: alpha(opacity: 0);
opacity: 0;
}

.big_pic .text {
position: absolute;
left: 10px;
bottom: 4px;
z-index: 3000;
color: #ccc;
}

.big_pic .length {
position: absolute;
right: 10px;
bottom: 4px;
z-index: 3000;
color: #ccc;
}

.big_pic .bg {
width: 400px;
height: 25px;
background: #000;
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
z-index: 2999;
bottom: 0;
left: 0;
}

.small_pic {
width: 380px;
height: 94px;
position: relative;
top: 7px;
left: 10px;
overflow: hidden;
}

.small_pic ul {
height: 94px;
position: absolute;
top: 0;
left: 0;
}

.small_pic li {
width: 120px;
height: 94px;
float: left;
padding-right: 10px;
background: url(../images/loading.gif) no-repeat center center;
cursor: pointer;
filter: alpha(opacity=60);
opacity: 0.6;

}

.small_pic .active {
opacity: 1;
}

.small_pic img {
width: 120px;
height: 94px;
}
</style>
<script src="./common.js"></script>
<script>
window.onload = function () {
//找節點
var playimages = document.querySelector("#playimages");
var prevbtn = getid("prev");
var nextbtn = getid("next");
var mark_left = getid("mark_left");
var mark_right = getid("mark_right");
var textInf = getid('text');
var length = getid('length');
var bigLi = document.querySelectorAll('#big_pic li');
var smallUl = getid('small');
var smallLi = smallUl.querySelectorAll('li');
var imglist = smallUl.getElementsByTagName('img');
var now = 0;//當前圖片下標
var zIndexNum = 2;//當前圖片層級
var timer = null;
var iw = smallLi[0].offsetWidth;
//設置最小ul的寬度
smallUl.style.width = (iw + 10) * smallLi.length + "px";
var arr = ["美圖1", "美圖2", "美圖3", "美圖4", "美圖5", "美圖6"];
//自動輪播
timer = setInterval(next, 2000);//每隔兩秒切換一個圖片
//下一張的函數
function next() {
now++;
if (now >= bigLi.length) {//大於ul的長度，就將第一張圖片迅速放到最後
now = 0;
zIndexReset();
}
tab();
}
function zIndexReset() {
for (var li of bigLi) {
li.style.zIndex = 0;
}
zIndexNum = 1;//重置變量，重置層級。
}
//上一張函數
function prev() {
now--;
if (now <= -1) {
now = bigLi.length - 1;
zIndexReset();
}
tab();
}

//切換圖片
function tab() {
//先用再加 翻滾到上面
bigLi[now].style.zIndex = zIndexNum++;
bigLi[now].style.height = 0;
startMove(bigLi[now], { "height": 320 });

//小圖的輪播
if (now == 0) {
smallUl.style.left = 0;
} else if (now == smallLi.length - 1) {
smallUl.style.left = -iw * (now - 2) + "px";
} else {
startMove(smallUl, { "left": -iw * (now - 1) });
}
//高亮 排他
for (var li of smallLi) {
li.style.opacity = 0.6;
li.style.filter = "alpah(opacity=60)";
}
startMove(smallLi[now], { "opacity": 100 });
//內容變化
textInf.innerHTML = arr[now];
length.innerHTML = `計算圖片數量${now + 1}/6`;
}
//點擊按鈕切換
playimages.onmouseover = function () {
clearInterval(timer);
}
playimages.onmouseout = function () {
timer = setInterval(next, 2000);
}
//顯示按鈕

prevbtn.onmouseover = mark_left.onmouseover = function () {
startMove(prevbtn, { 'opacity': 100 });
}

prevbtn.onmouseout = mark_left.onmouseout = function () {
startMove(prevbtn, { 'opacity': 0 });
}

nextbtn.onmouseover = mark_right.onmouseover = function () {
startMove(nextbtn, { 'opacity': 100 });
}

nextbtn.onmouseout = mark_right.onmouseout = function () {
startMove(nextbtn, { 'opacity': 0 });
}

//下一張
nextbtn.onclick = function () {
next();
}
//上一張
prevbtn.onclick = function () {
prev();
}
//3.點擊小圖切換大圖
for (let i = 0; i < imglist.length; i++) {
imglist[i].onclick = function () {
now = i;
tab();
}
}


}
</script>
</head>

<body>
<div id="playimages" class="play">
<ul class="big_pic" id="big_pic">
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>

<a id="mark_left" class="mark_left" href="javascript:;"></a>
<a id="mark_right" class="mark_right" href="javascript:;"></a>

<div class="bg">
<div id="text" class="text">美圖1</div>
<div id="length" class="length">計算圖片數量1/6</div>
</div>

<li style="z-index:1;">
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li>
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
<li>
<img src="images/5.jpg" />
</li>
<li>
<img src="images/6.jpg" />
</li>
</ul>
<div class="small_pic">
<ul style="width:390px;" id="small">
<li class="active">
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li>
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
<li>
<img src="images/5.jpg" />
</li>
<li>
<img src="images/6.jpg" />
</li>
</ul>
</div>
</div>
</body>

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