javascript写滑动图片

滑动图片特效在很多网站都能见到，今天学习了一下，觉得还是很有趣的，代码贴在下面

<!DOCTYPE html>
<html>
<head><title>Slide</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 src="./img/1.jpg" alt=""><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""><img src="./img/4.jpg" alt=""><img src="./img/5.jpg" alt=""><img src="./img/6.jpg" alt=""><img src="./img/7.jpg" alt=""><img src="./img/8.jpg" alt=""><img 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>
</body><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，这里就是对与wrap的leftvar end=index*Distance*(-1);var change=end-start;//通过这三个变量来控制图片向左向右，change的+—来控制左右移动var timer;//用计时器为图片添加动态效果var t=0;var maxT=30;clear();if(index==spanList.length){//index到最后一张图片时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";if(index==spanList.length&&t>=maxT){inner.style.left=0;index=0;//当图片到最后一张时把它瞬间切换回第一张，由于都是同一张图片不会影响效果}},17);//每17毫秒让块移动change/maxT×t}function forward(){index++;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>
</html>

附上转载链接：
作者：midasqerr
链接：http://www.imooc.com/article/7393

来源：慕课网

javascript写滑动图片相关推荐

十五分钟用JavaScript基础写一个图片轮播效果
十五分钟用JavaScript基础写一个图片轮播效果前言这次也是一个适合JavaScript初学者的小练手,用JavaScript的基本知识去写一个轮播图,其实轮播图有很多方法去实现,像用一些框架 ...
css菜单缓慢滑动_如何使用HTML，CSS和JavaScript构建滑动菜单栏
css菜单缓慢滑动 by Supriya Shashivasan 由Supriya Shashivasan 如何使用HTML,CSS和JavaScript构建滑动菜单栏 (How to build a ...
php js 异步上传图片,javascript实现异步图片上传方法实例
如何通过javascript写出异步图片上传?本文我们就和大家分享一些实例代码javascript实现异步图片上传.我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的 ...
TF之DNN：利用DNN【784→500→10】对MNIST手写数字图片识别数据集(TF自带函数下载)预测(98%)+案例理解DNN过程
TF之DNN:利用DNN[784→500→10]对MNIST手写数字图片识别数据集(TF自带函数下载)预测(98%)+案例理解DNN过程目录输出结果案例理解DNN过程思路代码设计输出结果案 ...
html预览图片的功能,javascript实现的图片预览功能
本文实例讲述了javascript实现的图片预览功能.分享给大家供大家参考,具体如下: 1.将下面的代码复制到内 /* Thumbnail image viewer- ?Dynamic Drive ...
怎么让图片从左往右移动php,javascript - 想让图片上那个块，在增加块的宽度的时候向右边移动，而不是向左边移动。需要怎么解决？...
javascript - 想让图片上那个块,在增加块的宽度的时候向右边移动,而不是向左边移动.需要怎么解决? 滿天的星座2017-07-05 10:39:20 0 2 212 * { marg ...
Jsp页面用javascript加滑动验证条
先上个效果图 1. 在head之间加入 <head> <script type="text/javascript" charset="utf-8&quo ...
TensorFlow神经网络（五）输入手写数字图片进行识别
一.断点续训为防止突然断电.参数白跑的情况发生,在backward中加入类似于之前test中加载ckpt的操作,给所有w和b赋保存在ckpt中的值: 1. 如果存储断点文件的目录文件夹中,包含有效断 ...
《人工智能实践：Tensorflow笔记》听课笔记22_6.1输入手写数字图片输出识别结果
附:课程链接第六讲.全连接网络实践 6.1输入手写数字图片输出识别结果由于个人使用Win7系统,并未完全按照课程所讲,以下记录的也基本是我的结合课程做的Windows系统+PyCharm操作.且本 ...

javascript写滑动图片

javascript写滑动图片相关推荐

最新文章

热门文章