js夯实基础之：轮播

最新推荐文章于 2024-04-22 03:52:24 发布

摇扇子的诸葛亮

最新推荐文章于 2024-04-22 03:52:24 发布

阅读量319

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq563969790/article/details/77748577

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我一直觉得仅仅将js应用于前段交互对于理解js是远远不够的，但是经常练习我认为可以夯实js基础。这一块逻辑比较简单也很基础，重点在于对dom的操控和委托事件。需要扎实的html、css基础。同时呢，ES6已经漫天飞舞，公司依然用的ES5标准，极其难受。这对于想提升的童鞋怕是要憋出病来。感兴趣的同学可以将下列代码封装成插件的形式。

整个代码分为三部分：style.css/ curousel.js/ index.html

style.css

    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
    }
    
    body {
        padding: 20px;
    }
    
    #container {
        position: relative;
        width: 600px;
        height: 400px;
        border: 3px solid #333;
        overflow: hidden;
    }
    
    #list {
        position: absolute;
        z-index: 1;
        width: 4200px;
        height: 400px;
    }
    
    #list img {
        float: left;
        width: 600px;
        height: 400px;
    }
    
    #buttons {
        position: absolute;
        left: 250px;
        bottom: 20px;
        z-index: 2;
        height: 10px;
        width: 100px;
    }
    
    #buttons span {
        float: left;
        margin-right: 5px;
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        border-radius: 50%;
        background: #333;
        cursor: pointer;
    }
    
    #buttons .on {
        background: orangered;
    }
    
    .arrow {
        position: absolute;
        top: 180px;
        z-index: 2;
        display: none;
        width: 40px;
        height: 40px;
        font-size: 36px;
        font-weight: bold;
        line-height: 39px;
        text-align: center;
        color: #fff;
        background-color: RGBA(0, 0, 0, .3);
        cursor: pointer;
    }
    
    .arrow:hover {
        background-color: RGBA(0, 0, 0, .7);
    }
    
    #container:hover .arrow {
        display: block;
    }
    
    #prev {
        left: 20px;
    }
    
    #next {
        right: 20px;
        }

curousel.js

/*
*轮播新手教程，参考博主http://www.cnblogs.com/LIUYANZUO/p/5679753.html
*删去了原代码中部分冗余的代码，简化逻辑，同时将代码改为ES6
*采用js原生写就，适合夯实基础，但是，这段代码是毒，极难维护和扩展。
*建议学习此代码了解思路之后看大神写的插件
*/
window.onload = function () {
	let list = document.getElementById( 'list' );
	let perv = document.getElementById( 'prev' );
	let next = document.getElementById( 'next' );
	
	let buttons = document.getElementById( 'buttons' ).getElementsByTagName( 'span' );
	
	let index = 1;
	buttons[0].className = 'on';
	list.style.left = 0;
	
	var buttonsShow = () => {
		for( let i = 0; i < buttons.length; i++) {
			buttons[i].className = '';
		}
		buttons[index-1].className = 'on';
	}

	var animation = ( offset ) => {
		let newLeft = parseInt(list.style.left) + offset;
		
		list.style.left = newLeft + 'px';
		if( newLeft < -2400 ) {
            list.style.left = 0 + 'px';
        }
        if( newLeft > 0 ){
            list.style.left = -2400 + 'px';
        }	
	}
	
	prev.onclick = () => {
		index -= 1;
		if(index < 1){
			index = 5;
		}
		buttonsShow();
		animation(600);
	}
	
	next.onclick = () => {
		index += 1;
		if( index > 5 ){
			index = 1;
		}
		buttonsShow();
		animation( -600 );
	}
	
	let timer;
	var play = () => {
		timer = setInterval( () => {
			next.onclick();
			} , 3000 );
	}
	play();
	let container = document.getElementById( 'container' );
	var stop = () => {
		clearInterval( timer );
	}
	container.onmouseover = stop;
	container.onmouseout = play;
	
	for(let i = 0; i < buttons.length; i++ ){		
		    buttons[i].onclick = () => {
			    let clickIndex = parseInt(buttons[i].getAttribute('index'));
			    let offset = 600 * (index - clickIndex);
			    animation(offset);
			    index = clickIndex;
			    buttonsShow();
		}
	}
}

index.html

<!Doctype html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<div id="container">
        <div id="list" >            
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpeg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/4.jpg" alt="4" />
            <img src="img/5.jpg" alt="5" />           
        </div>
		
        <div id="buttons">
            <span index="1"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>
</div>
<script src = "curousel.js" ></script>
</body>

</html>

访问 https://hopepdm.github.io/curousel/

可以看到轮播效果