原生JS实现图片轮播
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大图滚动</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
.clear{
*zoom:1;
}
.clear:after{
visibility: none;
content:"";
display:block;
clear:both;
height:0;
}
#wrap{
width: 510px;
height:286px;
margin:0 auto;
position:relative;
background: pink;
overflow: hidden;
}
#inner{
width: 1000%;
height:100%;
position:absolute;
left:0;
top:0;
}
#inner img{
width:10%;
height:100%;
float: left;
}
.paganation{
width: 100%;
position: absolute;
bottom:10px;
text-align:center;
}
.paganation span{
padding:5px 8px;
background: #F2F2F2;
color:red;
border-radius:50%;
cursor: pointer
}
.paganation .selected{
background: red;
color:white;
}
.arrow{
position:absolute;
top:0;
width: 30px;
height: 286px;
line-height: 286px;
text-align: center;
color: red;
cursor: pointer;
}
#right{
right: 0;
}
.arrow:hover{
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="wrap"><!-- 图片展示区 -->
<div id="inner" class="clear"><!-- 所有图片并排的块 -->
<img style="background:red;" src="img/1.jpg" alt="">
<img style="background:orange;" src="img/2.jpg" alt="">
<img style="background:green;" src="img/3.jpg" alt="">
<img style="background:cyan;" src="img/4.jpg" alt="">
<img style="background:yellow;" src="img/5.jpg" alt="">
<img style="background:purple;" src="img/6.jpg" alt="">
<img style="background:pink;" src="img/7.jpg" alt="">
<img style="background:blue;" src="img/8.jpg" alt="">
<img style="background:red;" src="img/1.jpg" alt="">
</div>
<div class="paganation" id="paganation"><!-- 页面按钮区域 -->
<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>
<script type="text/javascript">
var wrap=document.getElementById("wrap");
var inner=document.getElementById("inner");
var spanList=document.getElementById("paganation").getElementsByTagName("span");
var left=document.getElementById("left");
var right=document.getElementById("right"); var clickFlag=true;//设置左右切换标记位防止连续按
var time//主要用来设置自动滑动的计时器
var index=0;//记录每次滑动图片的下标
var Distance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度
//定义图片滑动的函数
function AutoGo(){
var start=inner.offsetLeft;//获取移动块当前的left的开始坐标
var end=index*Distance*(-1);//获取移动块移动结束的坐标。
//计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
var change=end-start;//偏移量 var timer;//用计时器为图片添加动画效果
var t=0;
var maxT=50;//滑动的效率
clear();//先把按钮状态清除,再让对应按钮改变状态
if(index==spanList.length){
spanList[0].className="selected";
}else{
spanList[index].className="selected";
}
clearInterval(timer);//开启计时器前先把之前的清
timer=setInterval(function(){
t++;
if(t>=maxT){//当图片到达终点停止计时器
clearInterval(timer);
clickFlag=true;//当图片到达终点才能切换
}
inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动
if(index==spanList.length&&t>=maxT){
inner.style.left=0;
index=0;
//当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
}
},17);
}
//编写图片向右滑动的函数
function forward(){
index++;
//当图片下标到最后一张把小标换0
if(index>spanList.length){
index=0;
}
AutoGo();
}
//编写图片向左滑动函数
function backward(){
index--;
//当图片下标到第一张让它返回到倒数第二张，
//left值要变到最后一张才不影响过渡效果
if(index<0){
index=spanList.length-1;
inner.style.left=(index+1)*Distance*(-1)+"px";
}
AutoGo();
} //开启图片自动向右滑动的计时器
time=setInterval(forward,3000); //设置鼠标悬停动画停止
wrap.onmouseover=function(){
clearInterval(time);
}
wrap.onmouseout=function(){
time=setInterval(forward,3000);
} //遍历每个按钮让其切换到对应图片
for(var i=0;i<spanList.length;i++){
spanList[i].onclick=function(){
index=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>
</body>
</html>
原生JS实现图片轮播的更多相关文章
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
随机推荐
- HDU 2504 又见GCD(最大公约数与最小公倍数变形题)
又见GCD Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- Exponentiation（java 大实数）
http://acm.hdu.edu.cn/showproblem.php?pid=1063 Exponentiation Time Limit: 2000/500 MS (Java/Others) ...
- android新闻App源码、仿微信源码、地图音乐源码等
Android精选源码 一款实用的休闲类App,新闻视频和技术应有尽有. android实现交互式K线图表源码 android新闻客户端和服务器源码 android MatetialDesign设计 ...
- C#面试题整理（1）
最近在看CLR VIA C#,发现了一些案例很适合来做面试题.特此整理: 1,System.Object里的GetType方法是否为虚函数?说出理由. 答案:不是,因为C#是一种类型安全的语言,如果覆 ...
- [国嵌攻略][161][USB总线介绍]
USB发展史 USB(universal serial bus),通用串行总线,是一种外部总线标准.用于规范电脑与外部设备的连接和通讯.USB是在1994年底由英特尔.康柏.IBM.Microsoft ...
- Linux 安装及配置 Nginx + ftp 服务器
Nginx 安装及配置 一.Nginx 简介: Nginx("engine x") 是一款是由俄罗斯的程序设计师 Igor Sysoev 所开发高性能的 Web和 反向代理服务器, ...
- 使用VSCode和VS2017编译调试STM32程序
近两年,微软越来越拥抱开源支持跨平台,win10搭载Linux子系统,开源VSCode作为跨平台编辑器,VS2017官方支持了Linux和嵌入式开发功能. ST也是,近两年开发的软件工具基本都是跨平台 ...
- js_3_for_if_try
在js中有哪些特殊变量? null 指向一个空地址,一个特殊的地址 var u 定义了一个特殊变量u,类型未定义,boolean(u)=false js中的for循环是什么样子? 对列表: for(v ...
- python_如何让类支持比较运算？
案例: 有时我们希望自定义的类,实例间可以使用比较运算符进行比较,我们自定义比较的行为. 需求: 有一个矩形的类,我们希望比较两个矩形的实例时,比较的是他们的面积 如何解决这个问题? 在类中重新定义比 ...
- js 抛物线 笔记备份
var funParabola = function(element, target, options) { /* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算,显然不合适,因为页面 ...