js實現輪播圖常規類（原生JS，沒有任何框架）
//如下是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"><</p>
<p class="next">></p>
</div>
</div>
</body>
</html>
相關文章
- 1. js實現輪播圖，模擬flash上下滾動（原生JS，沒有任何框架）
- 2. 原生js 實現輪播圖
- 3. 原生js實現輪播圖
- 4. 原生 JS 實現輪播圖
- 5. 原生JS實現滑動輪播圖
- 6. 原生js實現圖片輪播
- 7. 輪播圖的原生js實現
- 8. JavaScript 原生js實現輪播圖
- 9. 輪播圖 原生js實現
- 10. 原生JS實現輪播圖
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Java Spring框架是什麼？它有哪些好處？ - Spring教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js實現輪播圖，模擬flash上下滾動（原生JS，沒有任何框架）
- 2. 原生js 實現輪播圖
- 3. 原生js實現輪播圖
- 4. 原生 JS 實現輪播圖
- 5. 原生JS實現滑動輪播圖
- 6. 原生js實現圖片輪播
- 7. 輪播圖的原生js實現
- 8. JavaScript 原生js實現輪播圖
- 9. 輪播圖 原生js實現
- 10. 原生JS實現輪播圖