首页 > 代码库 > Javascript图片轮播
Javascript图片轮播
原文链接:
http://www.imooc.com/article/7393
编辑HTML代码:
<div id="wrap"><!--图片展示区--> <div id="inner" class="clear"><!--所有图片并排的块--> <a href="#"><img src="img/sw1.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw2.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw3.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw4.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw5.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw6.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw7.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw8.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw1.png" alt="图片已失效"/></a> </div> <div id="pagination" class="pagination"><!--页面数字按钮区域--> <span class="selected">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> </div> <div id="left" class="arrow"> <<< </div> <div id="right" class="arrow"> >>> </div> </div><!--wrap end-->
定义样式:
<style type="text/css"> *{ margin: 0; padding: 0; border: 0; } #wrap{/*整个轮播区域只会显示一张图片大小的空间,其余图片隐藏*/ width: 720px;/*图片宽度*/ height: 322px;/*图片高度*/ margin: 0 auto;/*水平居中*/ position: relative; background: lightpink; overflow: hidden; } .clear{/*兼容IE*/ zoom: 1; } .clear:after{ visibility: none; content: ""; display: block; clear: both; height: 0;/*这是为什么?*/ } #inner{ width: 1000%;/*这是为什么?*/ height: 100%; position: absolute; left: 0; top: 0; } #inner img{ width: 10%; float: left; } .pagination{/*页码的样式和摆放*/ width: 100%; position: absolute; bottom: 10px; text-align: center; } .pagination span{ padding: 5px 8px; background: green; color: aliceblue; border-radius: 50%;/*设置数字按钮边框圆角*/ cursor: pointer; } .pagination .selected{/*第一个页码的数字按钮样式*/ background: blue; color: chartreuse; } .arrow{/*箭头样式*/ position: absolute; top: 0; width: 35px; height: 322px;/*图片高度*/ line-height: 322px; text-align: center; color: black; cursor: pointer; } #right{ right: 0; } .arrow:hover{ background: rgba(0,0,0,0.5); } </style>
Javascript代码:
<script type="text/javascript"> var wrap = document.getElementById("wrap");//获取要轮播的DIV var inner = document.getElementById("inner");//获取轮播图并排的块 //获取pagination的子字节数字按钮 var spanList = document.getElementById("pagination").getElementsByTagName("span"); var left = document.getElementById("left");//获取往左箭头 var right = document.getElementById("right");//获取往右箭头 var clickFlag = true;//防止左右按钮的连续操作 var motive;//用来设置自动往左滑动的计时器 var index = 0;//记录每次滑动图片的下角标 var Distance = wrap.offsetWidth;//获取展示区的宽度(图片宽度) function AutoGo(){//定义图片滑动的函数 var start = inner.offsetLeft;//获取移动块当前left的坐标 var end = index * Distance * (-1);//获取移动块结束后的坐标(下角标*图片宽度*每次向左移动的一个宽度) //比如当移动第6张图片时,图片下角标为数值5乘以图片宽度322px就是图6往左偏移的值 5*322=1610px var change = end - start;//偏移量(x轴结束后的坐标减去当前left的坐标等于往左偏移的像素数) var motiver;//给图片添加轮播效果的间隔型定时器 var miniT = 0;//最短时间0毫秒 var maxT = 30;//最长时间,每30毫秒让块往左移动 clear();//先将按钮状态清除,再让对应的按钮改变状态 if(index == spanList.length){//if语句判断下角标是否等同于数字按钮的长度 spanList[0].className = "selected";//className返回元素的class属性,子节点下角标为0时返回selected }else{ spanList[index].className = "selected"; } clearInterval(motiver);//在开启定时器之前先将之前的清除 motiver = setInterval(function(){ miniT++; if(miniT >= maxT){ clearInterval(motiver);//当图片到达终点时清除间隔型定时器 clickFlag = true;//当图片到达终点时才能点击方向按钮切换图片 } //每隔多少毫秒(对应下列括号内的数值)往左偏移 = 偏移量/最长时间*最短时间 + X轴往左滑动的像素数 //比如第4张图片 = 4*322/0 + 4*322px inner.style.left = change / maxT * miniT + start + "px"; //如果满足下角标等同于子节点长度,以及最短时间大于等于最长时间的条件时, if(index == spanList.length && miniT >= maxT){ inner.style.left = 0; //当图片到达最后一张时让它瞬间切换回第一张,由于都是用的都是第一张图片所以不会影响效果 index = 0; } },20); } //定义图片往右滑动的函数 function forward(){ index++; if(index > spanList.length){//当图片下角标到达最后一张时记录滑动图片的下角标为0 index = 0; } AutoGo(); } //定义图片往左滑动函数 function backward(){ index--; //当图片下角标到达第一张时,让它返回到倒数第二张,left的值要变为最后一张时才不会影响效果 if(index < 0){ index = spanList.length - 1; inner.style.left = (index + 1) * Distance * (-1) + "px"; } AutoGo(); } //开启图片自动向右滑动的计时器,间隔多少毫秒切换一次图片,即一张图片停留时间为多少毫秒 motive = setInterval(forward,2000); //设置鼠标悬停时清除定时器,轮播暂停 wrap.onmouseover = function(){ clearInterval(motive); } wrap.onmouseout = function(){ motive = setInterval(forward,2000); } //遍历每个数字按钮让其切换到对应的图片 for(var i=0;i<spanList.length;i++){ spanList[i].onclick=function(){ //innerText用来定义数字按钮输出的文本 index = this.innerText - 1;//图片点击后下角标可以返回对应的图片,例如第4张是[3] = this.innerText -1; AutoGo(); } } left.onclick=function(){ if(clickFlag){ backward(); } clickFlag = false; } right.onclick=function(){ if(clickFlag){ forward(); } clickFlag = false; } //清除所有页面按钮状态颜色,只有当图片轮播时才能改变对应的按钮效果 function clear(){ for(var i=0;i < spanList.length;i++){ spanList[i].className = ""; } } </script>
Javascript图片轮播
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。