原生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"> ...
随机推荐
- Vijos P1114 FBI树【DFS模拟，二叉树入门】
描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树1,它的结点类型也包括F结点,B结点和I结点三种 ...
- CodeForces 543D：Road Improvement
题目:http://codeforces.com/problemset/problem/543/D 题意:给你一棵树,一开始边都是0,可以使任意的边变成1,对于每一个根节点求使得它到其他任一点的路径上 ...
- 重新学习一次javascript；
每次有项目的时候,总觉得自己什么都不会做,然后做的时候又很简单,一会就做完了,啪啪打脸: 每次别人问的时候,我知道怎么做,但是不知道具体原理,觉得瞬间low了: 想要好好的吧基础掌握一下: 这几天空闲 ...
- 如何使用padlepadle 进行意图识别-开篇
前言 意图识别是通过分类的办法将句子或者我们常说的query分到相应的意图种类.举一个简单的例子,我想听周杰伦的歌,这个query的意图便是属于音乐意图,我想听郭德纲的相声便是属于电台意图.做好了意图 ...
- 科普：String hashCode 方法为什么选择数字31作为乘子
1. 背景 某天,我在写代码的时候,无意中点开了 String hashCode 方法.然后大致看了一下 hashCode 的实现,发现并不是很复杂.但是我从源码中发现了一个奇怪的数字,也就是本文的主 ...
- vue前后台数据交互vue-resource文档
地址:https://segmentfault.com/a/1190000007087934 Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通 ...
- NSDate的常用用法
1. 创建或初始化可用以下方法 用于创建NSDate实例的类方法有 + (id)date; 返回当前时间 + (id)dateWithTimeIntervalSinceNow:(NSTimeInter ...
- Python的交叉编译移植至arm板
虽然网上有那么多python的交叉编译移植教程,但是方法差异蛮大,需要根据实际开发板的型号做调整,以下是适用于海思的板子移植过程. step 1. python版本从网上下就可以: step 2. 解 ...
- C#编译成以管理员身份运行程序
转载自:http://www.cnblogs.com/babycool/p/3569183.html 在使用winform程序获取调用cmd命令提示符时,如果是win7以上的操作系统,会需要必须以管理 ...
- extends Thread 与 implements Runnable 的区别
http://blog.csdn.net/zhikun518/article/details/7526298 1.通过实现Runnable接口创建线程 (1).定义一个类实现Runnable接口,重写 ...