实现效果：

实现原理：

// 步骤
// 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{

			width: 500px;

			height: 200px;

			padding: 7px;

			margin: 100px auto;

			position: relative;

			box-shadow: 1px 1px 5px #2d2d2d;

		}

		.screen{

			width: 500px;

			height: 200px;

			overflow: hidden;

			position: relative;

		}

		.screen li{

			width: 500px;

			height: 200px;

			overflow: hidden;

			float: left;

		}

		.screen ul{

			position: absolute;

			left: 0;

			top: 0;

			width: 3000px;

		}

		.all ol{

			position: absolute;

			right: 10px;

			bottom: 10px;

			line-height: 20px;

			text-align: center;

		}

		.all ol li{

			float: left;

			width: 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{

			width: 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>

　　

【前端】javascript实现带有子菜单和控件的轮播图slider的更多相关文章

  1. Android自己定义控件之轮播图控件

    背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个 ...

  2. WPF 控件库——轮播控件

    WPF 控件库系列博文地址: WPF 控件库——仿制Chrome的ColorPicker WPF 控件库——仿制Windows10的进度条 WPF 控件库——轮播控件 WPF 控件库——带有惯性的Sc ...

  3. 图解微信小程序---添加tabBar底部菜单，添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. JQuery和html+css实现带小圆点和左右按钮的轮播图

    是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...

  6. Android侧滑菜单和轮播图之滑动冲突

    接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单. 猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开 ...

  7. 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件（包含源代码）

    概述 最近,有客户向我们请求开发一个前端下拉控件,需求是显示了一个列表,其中包含可由用户单独选择的项目控件,该控件将在下拉列表中显示多选TreeView(树形图). 如今WijmoJS已经实现了该控件 ...

  8. 如何通过JavaScript构建Asp.net服务端控件

    摘要 虽然ASP.NET的服务器控件一直被大家所诟病,但是用户控件(ACSX)在某些场景下还是非常有用的. 在一些极特珠的情况下,我们会使用JavaScript动态的构建页面中的控件,但假设遇到了我要 ...

  9. 创建一个带模版的用户控件 V.3

    再重构此篇<创建一个带模版的用户控件  V.2>http://www.cnblogs.com/insus/p/4164149.html 让其它动态实现header,Item和Footer. ...

随机推荐

  1. idea 创建的maven+spring+mybatis项目整合 报错无法创建bean

    报错如下: Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with n ...

  2. Count the Colors---zoj1610线段树

    题目链接 题意: 求每种颜色有几段线段: 模拟数组: #include<stdio.h> #include<iostream> #include<algorithm> ...

  3. The Unique MST----poj1679次小生成树

    题目链接:http://poj.org/problem?id=1679 判断最小生成数是否唯一:如果唯一这权值和次小生成树不同,否则相同: #include<stdio.h> #inclu ...

  4. 问题：bower git is not installed or not in the path

    用bower install jquery安装jquery,bower提示错误bower git is not installed or not in the path. 根据错误信息的知道出现错误两 ...

  5. java 泛型没有协变类型， 所以要重用extends， 但使用List<? extends Fruit> 可以是ArrayList<Fruit>()、ArrayList<Apple>()、ArrayList<Orange>(), 因此不能add元素进去

    class Fruit{} class Apple extends Fruit{} class SubApple extends Apple{} class Orange extends Fruit{ ...

  6. 万恶之源 - Python基础数据类型一

    整数 整数在Python中的关键字用int来表示; 整型在计算机中运于计算和比较 在32位机器上int的范围是:  -2**31-2**31-1,即-2147483648-2147483647 在64 ...

  7. [LeetCode] 787. Cheapest Flights Within K Stops_Medium tag: Dynamic Programming, BFS, Heap

    There are n cities connected by m flights. Each fight starts from city u and arrives at v with a pri ...

  8. pandas.drop/isnull/fillna/astype的用法

    删除表中的某一行或者某一列更明智的方法是使用drop,它不改变原有的df中的数据,而是返回另一个dataframe来存放删除后的数据. (1)清理无效数据 df[df.isnull()] #返回的是个 ...

  9. B*树的定义

    B*树是B+树的变体,在B+树的非根和非叶子结点再增加指向兄弟的指针: B*树定义了非叶子结点关键字个数至少为(2/3)*M,即块的最低使用率为2/3(代替B+树的1/2). 所以,B*树分配新结点的 ...

  10. loadrunner怎么打印接口返回的参数

    //首先使用web_reg_save_param方法保存服务器返回的参数,如下: web_reg_save_param ("S_respond","LB=",& ...