原生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"> ...
随机推荐
- 洛谷 P1177 【模板】快速排序【13种排序模版】
P1177 [模板]快速排序 题目描述 利用快速排序算法将读入的N个数从小到大排序后输出. 快速排序是信息学竞赛的必备算法之一.对于快速排序不是很了解的同学可以自行上网查询相关资料,掌握后独立完成.( ...
- XYZZY(spfa求最长路)
http://acm.hdu.edu.cn/showproblem.php?pid=1317 XYZZY Time Limit: 2000/1000 MS (Java/Others) Memor ...
- dedecms_分页技术
<ul>{dede:list pagesize='30'} <li><a href="[field:arcurl/]">[field:title ...
- 邓_ Php·魔术方法
================================================ 1.__tostring() 用于定义输出对象引用时调用 常用于打印一些对象的信息 必须有返回值 ...
- hibernate.dialect是干嘛用的？
dialect[ˈdaɪəlekt]就是“方言”,因为hibernate是要把Java对象转换成关系数据库来描述的,而关系数据库虽然有一些统一的标准,如SQL-92等,但是实际上各数据库如Oracle ...
- CCF系列之字符串匹配(201409-3)
试题编号:201409-3试题名称:字符串匹配时间限制: 1.0s内存限制: 256.0MB 问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当 ...
- Do you know how many stuff inside your Google Account?
My friend Sandy she wants me to do her a favor. She'd like to clear Hangouts chat history. I think s ...
- 使用SQL 提示优化sql
use index 在查询语句中表名的后面,添加use index来提供希望mysql去参考的索引列表,就可以让mysql不再考虑其他可用的索引 explain select * from renta ...
- confirm显示数组中的内容时，总是带一个逗号分隔的解决方法
问题的关键 就是在给confirm显示之前,将数组转换成字符串,并以每个数组的元素为一个字符串,加上一个换行回车符即可: 代码中的背景色 为关键的点 <script type="tex ...
- kindeditor使用
下载地址http://kindeditor.net/down.php @官方文档 使用步骤: 引入js <script charset="utf-8" src="r ...