下载文档原格式
鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果上一次在我的文库中分享了点击按钮，图片左右切换轮播效果代码，今天主要是分享【鼠标点击按钮，图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码】。
最后的效果如下：Html代码部分：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>图片轮播效果制作</title><link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/style.js"></script></head><body><div class="banner"><ul class="pic"><li><a href="#"><img src="images/1.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/2.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/3.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/4.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/5.jpg" alt="美女" width="350" height="495"></a></li></ul><ul class="anniu"><li class="on"></li><li></li><li></li><li></li><li></li></ul><ul class="lr"><li class="pre"><a href="#"> < </a></li><li class="next"><a href="#"> > </a></li></ul></div></body></html>Css代码部分：*{margin:0px;padding:0px}li{list-style:none}a{text-decoration:none}img{border:0px}.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}.banner .pic{width:9999px;height:495px}.banner .pic li{width:350px;height:495px;float:left}.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline; cursor:pointer;border-radius:100%}.banner .anniu li.on{background:red}.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}.banner .lr a{color:white}.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}Javascript代码部分：$(function(){//鼠标滑过banner，左右按钮进行显示和隐藏$(".banner").hover(function(){$(".lr").show();},function(){$(".lr").hide();});//点击下面的小按钮，图片进行左右切换效果$(".anniu li").click(function(){$(this).addClass("on").siblings().removeClass("on");var num=$(this).index();$(".pic").animate({marginLeft:-350*num},"slow");});//图片自动轮播效果var a=0;var automatic=setInterval(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");},6000);//点击左右按钮，图片进行切换效果$(".pre").click(function(){a--;a=(a+5)%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});$(".next").click(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});});。
网站如何制作图片轮换效果
想使你的网站脱颖而出，可以试试使用JQuery制作图片轮换效果，为你的网页增添一抹亮色。
下面是店铺给大家整理的一些有关网站制作图片轮换效果的方法，希望对大家有帮助!
网站制作图片轮换效果的方法
打开VS2010，单击“文件”》“新建”》“网站”，新建一个网站，命名为tupianlunhuan。
(这个熟悉vs的应该都能做到。
)新建一个文件夹images，把要进行轮换的图片都放入到这个文件夹中。
右键单击网站名称，新建一个“web窗体“页，命名为tupianlunhuan1.aspx。
整体文档结构如下。
在tupianlunhuan.aspx页面的body主体中，添加一个div盒子(要设置div的id属性和class属性)，用来写显示轮换图片的代码，并为图片添加超链接
设置css样式
先导入JQuery的类库，然后再导入KinSlideshow的js文件(写好的js代码，导入了这个文件之后，我们直接调用即可，只需要设置切换参数和外观参数)。
下面是完整的JQuery代码(还有很多其他参数，可以根据自己需要设置)
然后保存代码，运行。
网页设计怎么让图片居中一、水平居中(text-align：center;)这个属性在没有浮动的状况下, 我们可以将块级元素转换为inline/inline-block, 然后其父元素加上text-align:center;属性就可以将其居中。
如果是行内元素(比如span、img、a等)直接在父元素上添加text-align:center;属性即可。
二、使用margin:0 auto;水平居中前提：给元素设定了宽度和具有display：block;的块级元素。
让一个DIV水平居中, 只要设置了DIV的宽度, 然后使用margin：0 auto, css自动算出左右边距, 使得DIV居中。
三、定位实现居中(必须计算偏移值)原理: 通过定位使元素左上角居中, 再通过偏移值margin 调整使元素中心居中。
缺点：高度宽度必须事先知道。
.absolute_p1 {position: relative;width: 200px;height: 200px;}.absolute_p1 .absolute_c1 {width: 100px;height: 100px;position: absolute; /* fixed 同理 */left: 50%; top: 50%;margin-left: -50px;margin-top: -50px; /* 必须依据宽高计算偏移量 */}该方法普遍使用, 但是前提必须知道元素的宽度和高度。
如果当页面的宽高是动态的, 比方说页面必须要弹出一个DIV层必须要居中显示, DIV的内容是动态的, 所以宽高也是动态的, 这是可以用jquery解决居中。
四、jquery实现水平和垂直居中。
jquery实现水平和垂直剧中的原理是通过jquery设置div 的css, 获取div的左, 上的边距偏移量, 边距偏移量的算法就是用页面窗口的宽度减去该div的宽度, 得到的值再除以2即左偏移量, 右偏移量算法相同。
如何使用前端开发技术实现图片轮播效果前端开发技术在网页设计中起着重要的作用，使得网页更加生动和吸引人。
其中，图片轮播效果是一种常见的设计元素，可以提升用户的浏览体验。
本文将探讨如何使用前端开发技术实现图片轮播效果。
首先，我们需要明确图片轮播的基本原理。
简单来说，图片轮播就是在一定时间间隔内连续切换多张图片的展示。
为了实现这个效果，可以使用HTML、CSS和JavaScript来完成。
第一步是在HTML中创建一个容器，用来承载图片。
我们可以使用div标签，并为其添加一个唯一的ID，以便于后续的样式和操作。
接下来，在CSS中为容器设置样式。
可以使用CSS的background-image属性来设置背景图片，并设置容器的宽度和高度，以适配不同的屏幕大小。
在HTML中，我们需要使用JavaScript来实现图片轮播的功能。
首先，我们需要在JavaScript中定义一个数组，存储所有要展示的图片的URL。
可以使用变量来动态添加或删除图片URL，以便于后续的图片切换。
接着，我们需要为图片容器添加一个定时器，以便定时切换图片。
可以使用JavaScript中的setInterval函数来实现。
在每个时间间隔内，我们可以通过改变容器的背景图片URL来实现图片的切换。
可以使用JavaScript中的style属性来设置背景图片URL。
此外，我们还可以为图片添加一些过渡效果，使得切换更加平滑和自然。
可以使用CSS的transition属性来实现。
例如，可以设置图片的过渡时间和过渡效果，如淡入淡出、滑动等。
除了基本的图片切换功能外，我们还可以为图片轮播添加一些交互效果，以增加用户的参与度和体验。
例如，我们可以为图片添加点击事件，使得用户可以手动切换图片。
还可以在图片上方添加一组小圆点，表示当前显示的图片，用户可以点击小圆点来直接跳转到相应的图片。
另外，为了保证网页的加载速度和用户体验，我们可以使用懒加载技术来延迟加载图片。
html focus 的用法HTML Focus的用法HTML是一种非常重要的网页制作语言。
其中，focus是其中的一个重要属性。
在HTML中，focus属性可以帮助用户更好地与网页进行交互，提升用户体验。
下面来详细讲解一下HTML Focus的用法。
一、HTML Focus的含义1.1 定义Focus是HTML中用来指定一个元素被选中时的行为方式的属性。
1.2 作用当用户点击或者通过字母键等方式对某一个元素进行选择时，这个元素会被选中并且会成为页面中唯一一个被选中的元素。
此时，元素会触发focus事件，并相应地改变其状态以引起用户的注意。
二、HTML Focus使用方法2.1 如何指定focus在HTML中，使用tabindex属性来指定当前页面上某一个元素（如按钮、输入框、图片等）的顺序。
在使用tabindex属性时，需要设置一个正整数表示当前页面上的元素顺序。
例如，如果我们想让页面上的输入框优先获得焦点，则可以设置tabindex值为1，以此类推。
2.2 Focus状态的样式在HTML中，我们可以使用CSS来定义focus状态下的样式。
具体方法是在CSS中设置:focus属性，然后定义要改变的元素的附加样式。
例如，如果需要改变按钮在focus状态下的颜色，则可以使用CSS代码如下：button:focus {color: red;}三、HTML Focus的好处3.1 提高用户体验通过使用focus属性，我们可以让用户更好地操作页面上的元素，避免了使用鼠标或者tab键来不停地移动。
同时，focus状态下的页面元素也更加醒目，使用者可以更清楚地了解当前页面的状态，提升了用户体验。
3.2 方便键盘用户操作有些用户可能无法使用鼠标来操作页面。
使用focus可以帮助键盘用户更加便捷地浏览页面，让他们更好地体验网页。
四、HTML Focus的注意事项4.1 tabindex属性的设置在使用focus时，需要特别注意tabindex属性的设置，确保元素的顺序和逻辑正确，以避免用户操作上的错误和误导。
焦点图的原理及应用1. 什么是焦点图？焦点图是指在网页设计中出现的一种常见的元素，通常以图片的形式展示在网页的顶部或者其他重要位置。
焦点图是通过连续切换多张图片来达到引起用户注意的效果，在推广、广告或文章阅读等场景中被广泛应用。
2. 焦点图的原理焦点图的原理基于在网页中使用Javascript等脚本库来实现图片的自动切换和动画效果。
以下是焦点图实现的基本原理：•HTML 结构：在网页中通过<div>元素来容纳焦点图，通过<img>元素来插入图像及其他内容。
•CSS 样式：通过 CSS 来设置焦点图容器的大小及背景颜色等样式。
•Javascript：使用 Javascript 脚本来控制焦点图的切换和动画效果。
–图片切换：通过设置一个定时器，定时改变图片元素的显示状态，使得不同的图片依次展示给用户。
–动画效果：通过设置过渡效果或者动画效果来实现图片的平滑切换，例如渐变、滑动、淡入淡出等。
–导航控制：通常在焦点图下方添加导航，用来显示当前展示图片的标识和可以手动切换图片的按钮。
3. 焦点图的应用焦点图由于其引人注目的效果和功能，被广泛应用于各种网页设计和推广场景。
以下是焦点图的常见应用：•广告宣传：焦点图是推广活动和广告宣传的重要元素之一。
通过在网站首页或特定页面中展示焦点图，可以有效吸引用户的注意力，提高广告宣传的效果。
•产品展示：焦点图可以用于展示特定产品的图片和介绍，以增加产品的曝光度和销售量。
通过图片切换和动画效果，可以吸引用户浏览，同时提供更多产品信息。
•文章导向：在博客、新闻网站等页面中，焦点图常用来突出重要的文章和内容。
通过在焦点图上展示文章的标题、摘要和缩略图，可以引导用户点击并查看详情。
•页面引导：焦点图还可以用于网页的引导和导航。
通过在焦点图上添加特定的按钮或链接，可以引导用户进入指定的页面或执行特定的操作，提升用户体验和网站的可用性。
4. 焦点图的设计要点为了达到最好的效果，设计焦点图时需要注意以下几点：•图片选择：选择高质量、高分辨率的图片，避免模糊或拉伸等不良效果。
实训4-9 制作网页焦点图一、实训目的1.理解元素的浮动，能够为元素设置浮动样式；2.熟悉清除浮动的方法，可以使用不同方法清除浮动；3.掌握元素的定位，能够为元素设置常见的定位模式；4.实训过程中，重点关注：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。
二、案例描述制作一个HTML5网页焦点图“网页焦点图.html”，默认效果如图1所示。
图1 网页焦点图默认效果当鼠标移上图1焦点图时，两侧将会出现焦点图切换按钮，效果如图2所示。
图2 鼠标移上焦点图效果三、分析效果图1.结构分析观察效果图1不难看出，焦点图模块整体上可以分为3部分：焦点图、切换图标、切换按钮。
焦点图可以使用<img>标记；切换图标由6个小图标组成，可以使用无序列表<ul>、<li>搭建结构；焦点图切换按钮可以使用两个<a>标记定义。
效果图2对应的结构如图3所示。
图3 焦点图页面结构图2.样式分析控制效果图2的样式主要分为4个部分，具体如下：（1）通过<div>对整个页面进行整体控制，需要设置相对定位方式。
（2）通过<a>标记控制左右两侧的切换按钮样式及其位置，并设置左浮动样式。
（3）通过<ul>>整体控制切换图标模块，需要设置绝对定位方式。
（4）通过<li>控制每一个切换小图标，需要设置每个小图标的显示效果。
四、案例实现1.常规准备工作启动Hbuilder，在Hbuilder中新建web项目“实训4-9”，建议建在D盘根目录。
将实训4-9更名为“学号最后两位+姓名-实训4-9”，称为“实训文件夹”2.制作页面结构在“实训文件夹”中新建HTML页面“网页焦点图.html”拷贝网页素材图片到相应Img文件夹。
使用HTML标记搭建页面结构，参考代码如下：1<!doctype html>2<html>3<head>4<meta charset="utf-8">5<title>网页焦点图</title>6</head>7<body>8<div>9<img src="images/11.jpg" alt="网页焦点图">10<a href="#"class="left"><</a>11 <a href="#" class="right">></a>12 <ul>13 <li class="max"></li>14 <li></li>15 <li></li>16 <li></li>17 <li></li>18 <li></li>19 </ul>20</div>21</body>22</html>结构中，通过最外层的<div>对车载音乐页面进行整体控制，并使用<img>标记插入焦点图片。
js实现左右轮播图本⽂实例为⼤家分享了js实现左右轮播图的具体代码，供⼤家参考，具体内容如下我的轮播图功能有：⾃动播放、点击焦点切换和点击左右按钮切换效果图：⾃动轮播点击焦点切换点击左右按钮切换注意：本⽂⽤带背景颜⾊的li标签指代图⽚，有需要的话可以将图⽚插⼊li标签内思路：基础布局和css样式（1）给盛放要轮播的图⽚的盒⼦绝对定位js中的代码（2）复制第⼀张图⽚放在盒⼦最后，复制最后⼀张图⽚放在盒⼦最前，以保证轮播图左右滑动效果（否则看起来会有⼀点卡顿）（3）设置盒⼦位置，通过移动这个盒⼦的位置，产⽣图⽚移动的效果，⽤定时器设置轮播效果（4）设置⿏标划⼊停播事件，设置按钮点击事件，设置焦点点击事件（5）解决点击太快定时器混乱问题，解决切屏后定时器混乱问题⼀布局<!-- 布局 --><section><ul><li style="background-color:aqua;">1</li><li style="background-color: burlywood;">2</li> <li style="background-color: coral;">3</li></ul><ol></ol><div><a href=""><</a><a href="">></a></div>⼆样式* {margin: 0;padding: 0;}ul,ol,li {list-style: none;}a {text-decoration: none;}section {width: 300px;margin: 30px auto;height: 200px;border: 5px solid;position: relative;/* overflow: hidden; */}ul {width: 300%;height: 100%;text-align: center;line-height: 200px;font-size: 100px;position: absolute;top: 0;left: 0;}li {width: 300px;height: 100%;float: left;}ol {width: 150px;height: 20px;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);border-radius: 15px;display: flex;justify-content: space-evenly;align-items: center;}ol li {width: 15px;height: 15px;background-color: ivory;border-radius: 50%;.active {background-color: greenyellow;}三原⽣js1、获取元素//1、获取盛放图⽚的盒⼦和盛放焦点的盒⼦let ul = document.querySelector('ul')let ol = document.querySelector('ol')//获取⼤盒⼦和⼤盒⼦的宽let wrap = document.querySelector('section')let wrap_width = wrap.clientWidth2、添加焦点const frg = document.createDocumentFragment()for (let i = 0; i < ul.children.length; i++) {let focus = document.createElement('li')frg.appendChild(focus)//焦点初始化if (i == 0) focus.className = 'active'}ol.appendChild(frg)3、复制元素复制元素，将复制元素放在指定位置改变盛放图⽚的盒⼦⼤⼩,改变图⽚位置，使页⾯打开时显⽰第⼀张图⽚let first = ul.firstElementChild.cloneNode(true)let last = stElementChild.cloneNode(true)ul.appendChild(first)ul.insertBefore(last, ul.firstElementChild)ul.style.width = ul.children.length * 100 + '%'ul.style.left = -wrap_width + 'px'4、开始轮播//设置⼀个图⽚索引let index = 1//⼀会⼉会⽤到这段代码，就直接封装成函数了autoplay()//⾃动播放函数，每隔两秒切换⼀次图⽚function autoplay() {move_time = setInterval(() => {index++move(ul, 'left', -index * wrap_width, movend)}, 2000)}//运动函数，设置图⽚切换⽅式//参数ele，元素；type，元素属性；value，元素运动结束时属性值；cb()，元素运动结束函数 function move(ele, type, value, cb) {//获取元素属性初始值let spe = parseInt(getComputedStyle(ele)[type])//元素属性改变过程change_timer = setInterval(() => {value > spe ? spe += 5 : spe -= 5ele.style[type] = spe + 'px'if (value > spe) {if (spe >= value) {clearInterval(change_timer)cb()}} else {if (spe <= value) {clearInterval(change_timer)cb()}}}, 10)//运动结束函数//判断索引临界值，更改索引，更改盒⼦位置，使图⽚轮播//让焦点和图⽚配套function movend() {if (index >= ul.children.length - 1) {index = 1ul.style.left = -index * wrap_width + 'px'}if (index <= 0) {index = ol.children.length - 1ul.style.left = -index * wrap_width + 'px'}for (let i = 0; i < ol.children.length; i++) {ol.children[i].className = ''}ol.children[index - 1].className = 'active'}5、⿏标移⼊停播，移出开始播放wrap.onmouseover = () => clearInterval(move_time)wrap.onmouseout = () => autoplay()6、点击左右按钮切换图⽚//获取左右按钮let left = document.querySelector('div').firstElementChildlet right = document.querySelector('div').lastElementChild//点击左按钮，索引减少，图⽚切到上⼀张left.onclick = function() {index--move(ul, 'left', -index * wrap_width, movend)}//点击右按钮，索引增加，图⽚切到下⼀张right.onclick = function() {index++move(ul, 'left', -index * wrap_width, movend)}7、点击焦点切换图⽚for (let i = 0; i < ol.children.length; i++) {//获取焦点索引ol.children[i].id = i//点击焦点切换图⽚ol.children[i].onclick = function() {index = this.id - 0 + 1move(ul, 'left', -index * wrap_width, movend)}}8、解决切屏后定时器混乱问题9、解决点击太快定时器混乱问题添加开关，点击前关着，点击后图⽚未切换完成开着，图⽚切换完打开开关，将语句添加进点击事件函数中即可if (flag) returnflag = true四全部代码<!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>轮播图21</title><style>* {margin: 0;padding: 0;}ol,li {list-style: none;}a {text-decoration: none;}section {width: 300px;margin: 30px auto;height: 200px;border: 5px solid;position: relative;overflow: hidden;}ul {width: 300%;height: 100%;text-align: center;line-height: 200px;font-size: 100px;position: absolute;top: 0;left: 0;}li {width: 300px;height: 100%;float: left;}ol {width: 150px;height: 20px;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);border-radius: 15px;display: flex;justify-content: space-evenly;align-items: center;}ol li {width: 15px;height: 15px;background-color: ivory;border-radius: 50%;}.active {background-color: purple;}div {position: absolute;font-size: 20px;height: 30px;width: 100%;top: 50%;transform: translateY(-50%);display: flex;justify-content: space-between;align-items: center;}div a {background-color: rgba(0, 0, 0, 0.2); width: 30px;div a:active {background-color: rgba(0, 0, 0, 0.5);}</style></head><body><!-- 布局 --><section><ul><li style="background-color:aqua;">1</li><li style="background-color: burlywood;">2</li><li style="background-color: coral;">3</li></ul><ol></ol><div><a href="javascript:;" rel="external nofollow" rel="external nofollow" ><</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" >></a></div></section><script></script><script>//⾃动播放函数，每隔两秒切换⼀次图⽚function autoplay() {move_time = setInterval(() => {index++move(ul, 'left', -index * wrap_width, movend)}, 2000)}//运动函数，设置图⽚切换⽅式//参数ele，元素；type，元素属性；value，元素运动结束时属性值；cb()，元素运动结束函数 function move(ele, type, value, cb) {//获取元素属性初始值let spe = parseInt(getComputedStyle(ele)[type])//元素属性改变过程change_timer = setInterval(() => {value > spe ? spe += 10 : spe -= 10ele.style[type] = spe + 'px'if (value > spe) {if (spe >= value) {clearInterval(change_timer)cb()}} else {if (spe <= value) {clearInterval(change_timer)cb()}}}, 10)}//运动结束函数//判断索引临界值，更改索引，更改盒⼦位置，使图⽚轮播//让焦点和图⽚配套function movend() {if (index >= ul.children.length - 1) {index = 1ul.style.left = -index * wrap_width + 'px'}if (index <= 0) {index = ol.children.lengthul.style.left = -index * wrap_width + 'px'}for (let i = 0; i < ol.children.length; i++) {ol.children[i].className = ''}ol.children[index - 1].className = 'active'flag = false}//1、获取盛放图⽚的盒⼦和盛放焦点的盒⼦let ul = document.querySelector('ul')let ol = document.querySelector('ol')//获取⼤盒⼦和⼤盒⼦的宽let wrap = document.querySelector('section')let wrap_width = wrap.clientWidth//9、解决连续点击页⾯混乱问题//添加开关，点击前关着，点击后图⽚未切换完成开着，图⽚切换完打开开关let flag = false//2、添加焦点const frg = document.createDocumentFragment()for (let i = 0; i < ul.children.length; i++) {let focus = document.createElement('li')frg.appendChild(focus)//焦点初始化if (i == 0) focus.className = 'active'}ol.appendChild(frg)//3、复制元素，将复制元素放在指定位置//改变盛放图⽚的盒⼦⼤⼩,改变图⽚位置，使页⾯打开时显⽰第⼀张图⽚let first = ul.firstElementChild.cloneNode(true)let last = stElementChild.cloneNode(true)ul.appendChild(first)ul.insertBefore(last, ul.firstElementChild)ul.style.width = ul.children.length * 100 + '%'ul.style.left = -wrap_width + 'px'//4、图⽚⾃动轮播//设置⼀个图⽚索引let index = 1//⼀会⼉会⽤到这段代码，就直接封装成函数了autoplay()//5、⿏标移⼊停播，移出开始播放wrap.onmouseover = () => clearInterval(move_time)wrap.onmouseout = () => autoplay()//6、点击左右按钮切换图⽚//获取左右按钮let left = document.querySelector('div').firstElementChildlet right = document.querySelector('div').lastElementChild//点击左按钮，索引减少，图⽚切到上⼀张left.onclick = function() {if (flag) returnindex--move(ul, 'left', -index * wrap_width, movend)flag = true}//点击右按钮，索引增加，图⽚切到下⼀张right.onclick = function() {if (flag) returnindex++move(ul, 'left', -index * wrap_width, movend)flag = true}//7、点击焦点切换图⽚for (let i = 0; i < ol.children.length; i++) {//获取焦点索引ol.children[i].id = i//点击焦点切换图⽚ol.children[i].onclick = function() {if (flag) returnindex = this.id - 0 + 1move(ul, 'left', -index * wrap_width, movend)flag = true}}//8、解决切屏后页⾯混乱问题document.onvisibilitychange = () => document.visibilityState == 'hidden' ? clearInterval(move_time) : autoplay() </script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
案例：⽹页轮播图轮播图也称为焦点图，是⽹页中⽐较常见的⽹页特效。
功能需求：1. ⿏标经过轮播图模块，左右按钮显⽰，⿏标离开则隐藏左右按钮。
2. 点击右侧按钮⼀次，图⽚往左播放⼀张，以此类推，左侧按钮同理。
3. 图⽚播放的同时，下⾯⼩圆圈模块跟随⼀起变化。
4. 点击⼩圆圈，可以播放相应图⽚。
5. ⿏标不经过轮播图，轮播图也会⾃动播放图⽚。
6. ⿏标经过轮播图模块，⾃动播放停⽌。
因为js较多，我们单独新建js⽂件夹，再新建js⽂件，引⼊页⾯中。
此时需要添加load事件。
需要实现功能的具体思路如下：①动态⽣成⼩圆圈：核⼼思路：⼩圆圈的个数要跟图⽚张数⼀致所以⾸先要得到ul⾥⾯图⽚的张数（图⽚放⼊li⾥⾯，所以也就是li的个数）利⽤循环动态⽣成⼩圆圈（这个⼩圆圈要放⼊ol⾥⾯）创建节点createElement('li')插⼊节点：ol.appendChild(li)第⼀个⼩圆圈需要添加current类，默认是第⼀个⼩圆圈是选中的状态②点击⼩圆圈滚动图⽚：此时⽤到animate动画函数，将js⽂件引⼊（注意，因为index.js依赖animate.js，所以animate.js的引⼊必须要写到index.js上⾯）使⽤动画函数的前提，该元素必须要有定位注意是ul移动，⽽不是⼩li滚动图⽚的核⼼算法：点击某个⼩圆圈，就让图⽚滚动，⼩圆圈的索引号乘以图⽚的宽度做为ul移动距离③点击右侧按钮⼀次，就让图⽚滚动⼀张：声明⼀个变量num，点击⼀次，⾃增1，让这个变量乘以图⽚宽度，就是ul的滚动距离图⽚⽆缝滚动原理把ul第⼀个li复制⼀份，放到ul的最后⾯当图⽚滚动到克隆的最后⼀张图⽚时，让ul快速的、不做动画的跳到最左侧：left为0同时num赋值为0，可以从新开始滚动图⽚了实现⽆缝滚动的步骤：克隆第⼀张图⽚，克隆ul中第⼀个li，cloneNode(true)深克隆复制⾥⾯的⼦节点，然后添加到ul的最后⾯（appendChild）④点击右侧按钮，⼩圆圈跟随变化：最简单的做法是再声明⼀个变量circle，每次点击⾃增1，注意，左侧按钮也需要添加这个变量，因此需要声明全局变量但是图⽚有5张（实际上只有4张，但是因为要实现⽆缝滚动原理，所以将第⼀张复制了⼀份放在最后），⼩圆圈只有4个，必须加⼀个判断条件如果circle == 4就从新复原为0⑤⾃动播放功能：添加⼀个定时器⾃动播放轮播图，实际就类似于点击了右侧按钮此时使⽤⼿动调⽤右侧按钮点击事件 arrow_r.click()⿏标经过焦点图focus就停⽌定时器⿏标离开焦点图focus就开启定时器⑥节流阀功能：防⽌轮播图按钮点击造成播放过快的问题节流阀⽬的：当上⼀个函数动画内容执⾏完毕，再去执⾏下⼀个函数动画，让事件⽆法连续触发核⼼实现思路：利⽤回调函数，添加⼀个变量来控制，锁住函数和解锁函数开始设置⼀个变量 var flag = true;if (flag) {flag = false; do something} 关闭⽔龙头利⽤回调函数，动画执⾏完毕后，flag = true 打开⽔龙头核⼼代码如下：<!-- 页⾯布局 --><div class="focus"><!-- 左侧按钮使⽤的是icomoon的字体图标 --><a href="javascript:;" class="arrow-l"> </a><!-- 右侧按钮使⽤的是icomoon的字体图标 --><a href="javascript:;" class="arrow-r"> </a><!-- 核⼼的滚动区域 --><!-- 图⽚链接格式：ul>li>a>img --><ul><li><a href="#"><img src="upload/focus.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus1.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus2.jpg" alt=""></a></li><li><a href="#"><img src="upload/focus3.jpg" alt=""></a></li></ul><!-- 底部⼩圆圈 --><ol class="circle"></ol></div>/* CSS样式 */.focus {position: relative;width: 721px;height: 455px;overflow: hidden;}.focus ul {/* 注意：轮播图中是ul在左右的滚动，不是设置⼩li动画必须要有定位，所以要给ul加上定位 */position: absolute;top: 0;left: 0;width: 600%;}.focus ul li {/* 注意：这⾥的四张图⽚并不能浮动起来因为⼀张图⽚设置的与⽗盒⼦focus⼀样⼤所以即使浮动起来了，⼀⾏也显⽰不下，⽽导致并没有想要的浮动效果解决办法：使li的⽗盒⼦ul的宽度⾜够⼤，然后让focus盒⼦溢出隐藏 */float: left;}.arrow-l,.arrow-r {display: none;/* ⼦绝⽗相：⼦元素绝对定位，则⽗元素必须是相对定位 */position: absolute;/* 下⾯两句代码为⽔平居中的⽅式 *//* 定位到⽗元素的居中位置 */top: 50%;/* 还需要往上⾛⾃⼰⾼度的⼀半值 */margin-top: -20px;/* a标签没有⼤⼩，常规来说不能给定宽⾼但是浮动下的绝对定位的元素可以给定⼤⼩*/ width: 24px;height: 40px;/* 背景设置为半透明状 */background: rgba(0, 0, 0, .3);/* ⽂字⽔平居中⽤text-align 垂直居中⽤line-height */text-align: center;line-height: 40px;color: #fff;font-family: 'icomoon';font-size: 18px;/* ul和arrow-l、arrow-r都有定位，就有层级关系，ul的层级压住了左右按钮，因此需要增加层级 */z-index: 2;}.arrow-r {/* 指定盒⼦参照相对物右边界向左偏移 */right: 0;}.circle {position: absolute;bottom: 10px;left: 50px;}.circle li {float: left;width: 8px;height: 8px;border: 2px solid rgba(255, 255, 255, 0.5);margin: 0 3px;/* 使li变成圆形 */border-radius: 50%;/* ⿏标经过时显⽰为⼩⼿ */cursor: pointer;}.current {background-color: #fff;}封装的动画函数animate.js⽂件：function animate(obj, target, callback) {// console.log(callback); callback = function() {} 调⽤的时候 callback()// 先清除以前的定时器，只保留当前的⼀个定时器执⾏clearInterval(obj.timer);obj.timer = setInterval(function() {// 步长值写到定时器的⾥⾯// 把我们步长值改为整数不要出现⼩数的问题// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {// 停⽌动画本质是停⽌定时器clearInterval(obj.timer);// 回调函数写到定时器结束⾥⾯// if (callback) {// // 调⽤函数// callback();// }// 注意此处的优化代码callback && callback();}// 把每次加1 这个步长值改为⼀个慢慢变⼩的值步长公式：(⽬标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);}出现⼀个bug1：当点击⼩圆圈移动到指定图⽚后，再点击下⼀张的按钮，结果图⽚却返回上⼀张了。
