• 【前端】javascript实现带有子菜单和控件的轮播图slider


    实现效果:

    实现原理:

    // 步骤
    // 1. 获取事件源以及相关元素
    // 2. 复制第一张图片所在的li,添加到ul的最后面
    // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮
    // 4. 鼠标放到ol的li上切换图片
    // 5. 添加定时器
    // 6. 左右切换图片(鼠标放上去隐藏,移开显示)

    实现代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>轮播图</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		*{
    			padding: 0;
    			margin: 0;
    			list-style: none;
    			border: 0;
    		}
    		.all{
    			 500px;
    			height: 200px;
    			padding: 7px;
    			margin: 100px auto;
    			position: relative;
    			box-shadow: 1px 1px 5px #2d2d2d;
    		}
    		.screen{
    			 500px;
    			height: 200px;
    			overflow: hidden;
    			position: relative;
    		}
    		.screen li{
    			 500px;
    			height: 200px;
    			overflow: hidden;
    			float: left;
    		}
    		.screen ul{
    			position: absolute;
    			left: 0;
    			top: 0;
    			 3000px;
    		}
    		.all ol{
    			position: absolute;
    			right: 10px;
    			bottom: 10px;
    			line-height: 20px;
    			text-align: center;
    		}
    		.all ol li{
    			float: left;
    			 20px;
    			height: 20px;
    			text-align: center;
    			background-color: #fff;
    			border: 1px solid #ccc;
    			margin-left: 10px;
    			cursor: pointer;
    		}
    		.all ol li.current{
    			background-color: #03c03c;
    		}
    		#arr{
    			display: none;
    		}
    		#arr span{
    			 40px;
    			height: 40px;
    			left: 5px;
    			top: 50%;
    			position: absolute;
    			margin-top: -20px;
    			background-color: #000;
    			cursor: pointer;
    			line-height: 35px;
    			text-align: center;
    			font-weight: bold;
    			font-family: "微软雅黑";
    			font-size: 30px;
    			color: #fff;
    			opacity: 0.3;
    			border-radius: 50%;
    			box-shadow: 1px 1px 3px #2d2d2d;
    		}
    		#arr #right{
    			right: 5px;
    			left: auto;
    		}
    	</style>
    </head>
    <body>
    <div class="all" id="all">
    	<div class="screen" id="screen">
    		<ul id="ul">
    			<li><img src="./images/01.jpg" width="500" height="200"></li>
    			<li><img src="./images/02.jpg" width="500" height="200"></li>
    			<li><img src="./images/03.jpg" width="500" height="200"></li>
    			<li><img src="./images/04.jpg" width="500" height="200"></li>
    			<li><img src="./images/05.jpg" width="500" height="200"></li>
    		</ul>
    		<!-- 图片子菜单 -->
    		<ol>
    			
    		</ol>
    		<!-- 左右切换按钮 -->
    		<div id="arr">
    			<span id="left"><</span>
    			<span id="right">></span>
    		</div>
    	</div>
    </div>
    
    <!-- script -->
    <script type="text/javascript">
    	// 赋值第一张图片放到ul的最后,当图片切换到第五张的时候,直接切换第六张,再从第一张切换到第二张的时候先瞬间切换到第一张图片,然后滑倒第二张
    
    	// 步骤
    	// 1. 获取事件源以及相关元素
    	// 2. 复制第一张图片所在的li,添加到ul的最后面
    	// 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮
    	// 4. 鼠标放到ol的li上切换图片
    	// 5. 添加定时器
    	// 6. 左右切换图片(鼠标放上去隐藏,移开显示)
    
    	// 1. 获取事件源以及相关元素
    	var all = document.getElementById("all");
    	var screen = all.firstElementChild || all.firstChild;
    	var imgWidth = screen.offsetWidth;
    	var ul = screen.firstElementChild || screen.firstChild;
    	var ol = screen.children[1];
    	var div = screen.lastElementChild || screen.lastChild;
    	var spanArr = div.children;
    
    	// 2. 复制第一张图片所在的li,添加到ul的最后面
    	var ulNewLi = ul.children[0].cloneNode(true);
    	ul.appendChild(ulNewLi);
    
    	// 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮
    	for(var i=0; i<ul.children.length-1; i++){
    		var olNewLi = document.createElement("li");
    		olNewLi.innerHTML = i+1;
    		ol.appendChild(olNewLi);
    	}	
    	var olLiArr = ol.children;
    	olLiArr[0].className = "current";
    
    	// 4. 鼠标放到ol的li上切换图片
    	for(var i=0; i<olLiArr.length; i++){
    		// 自定义属性,把索引值绑定到元素的index属性上
    		olLiArr[i].index = i;
    		olLiArr[i].onmouseover = function(){
    			// 排他思想
    			for(var j=0; j<olLiArr.length; j++){
    				olLiArr[j].className = "";
    			}
    			this.className = "current"
    			// 鼠标放到小方块上时,索引值和key以及square同步
    			// key = this.index;
    			// square = this.index;
    			key = square = this.index;
    			// 移动盒子
    			animate(ul, -this.index*imgWidth);
    		}
    	}
    
    	// 5. 添加定时器
    	var timer = setInterval(autoPlay, 1000);
    
    	// 固定向右切换图片
    	// 两个定时器(一个记录图片,一个记录子菜单栏)
    	var key = 0;
    	var square = 0;
    	function autoPlay(){
    		// 通过key的自增来模拟图片的索引值,然后移动ul
    		key++;
    		if(key > olLiArr.length){
    			// 图片已经滑到最后一张,接下来应该跳转到第一张,然后滑动到第二张
    			ul.style.left = 0;
    			key = 1;
    		}
    		animate(ul, -key*imgWidth);
    		// 通过控制square的自增来模拟小方块的索引值,然后点亮盒子
    		// 排他思想做小方块
    		square++;
    		if(square > olLiArr.length-1){
    			// 索引值不能大于5,如果大于5则立即变为0;
    			square = 0;
    		}
    		for(var i=0; i<olLiArr.length; i++){
    			olLiArr[i].className = "";
    		}
    		olLiArr[square].className = "current";
    	}
    
    	// 鼠标放上去清除定时器,移开启动定时器
    	all.onmouseover = function(){
    		div.style.display = "block";
    		clearInterval(timer);
    	}
    	all.onmouseout = function(){
    		div.style.display = "none";
    		timer = setInterval(autoPlay,1000);
    	}
    
    	// 6. 左右切换图片(鼠标放上去显示,移开隐藏)
    	spanArr[0].onclick = function(){
    		// 通过控制key的自增来模拟图片的索引值,然后移动ul
    		key--;
    		if(key<0){
    			// 先移到最后一张,然后key的值取前一张的索引值,然后向前移动
    			ul.style.left = -imgWidth*(olLiArr.length) + "px";
    			key = olLiArr.length-1;
    		}
    		animate(ul, -key*imgWidth);
    		// 通过控制square的自增来模拟小方块的索引值,然后点亮小方块
    		square--;
    		if(square<0){
    			// 索引值不能大于等于5,如果为5,立即变为0
    			square = olLiArr.length-1;
    		}
    		for(var i=0; i<olLiArr.length; i++){
    			olLiArr[i].className = "";
    		}
    		olLiArr[square].className = "current";
    	}
    
    	spanArr[1].onclick = function(){
    		// 右侧的和定时器一模一样
    		autoPlay();
    	}
    
    	// 动画封装
    	var absSpeed = 10; //设定步长
    	function animate(ele, target){
    		clearInterval(ele.timer);
    		var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
    		ele.timer = setInterval(function(){
    			var val = target - ele.offsetLeft;
    			ele.style.left = ele.offsetLeft + speed + "px";
    			if(Math.abs(val) < Math.abs(speed)){
    				ele.style.left = target + "px";
    				clearInterval(ele.timer);
    			}
    		}, 10)
    	}
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    今天还要去一次北仑
    重归漫漫长路
    双休日,累
    调整心情,迎接新的挑战
    多喝点水,对身体有好处
    丈人生病住院了
    WPF,DataGrid数据绑定
    AXIS2简介
    心事一件件的了掉,希望一切都能恢复到正常
    驾车是种乐趣,也是种累
  • 原文地址:https://www.cnblogs.com/dragonir/p/7764486.html
Copyright © 2020-2023  润新知