纯JS实现轮播图特效——详解
<div id="slider">
<div id="sliderImgs">
<img src="img/mi04.jpg" width="1000px"/>
<img src="img/mi01.jpg" width="1000px" title="oneImg"/>
<img src="img/mi02.jpg" width="1000px" title="twoImg"/>
<img src="img/mi03.jpg" width="1000px" title="threeImg"/>
<img src="img/mi04.jpg" width="1000px" title="fourImg"/>
<img src="img/mi01.jpg" width="1000px"/>
<!--因为要做无缝滚动，所以要克隆第一张和最后一张，放到最后一张后面和最前面-->
</div>
<div id="buttons">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div>
<span id="prev"><</span>
<span id="next">></span>
</div>
</div>
CSS部分
<style type="text/css">
*{
margin:;
padding:;
}
/*禁止html元素别被鼠标选中,必须要写不然会有bug,--start*/
*{
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
/*禁止html元素别被鼠标选中--end*/ #slider{
width: 1000px; /*设置为图片宽度*/
height: 376px; /*设置为图片高度*/
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
position: relative;
/*border: 2px solid palegreen;*/
}
#sliderImgs{
width: 600%; /*几张图片就是 6*100% */
position: absolute; /*必须设置绝对定位，才能使用left属性*/
left: -1000px; /*把第一张假图偏移出去*/
/*border: 1px solid blue;*/
}
#sliderImgs img{
float: left;
} #buttons{
width: 70px;
position: absolute;
z-index:; /*设置图片堆叠属性，仅限于定位的元素使用。默认值为0，值越大，优先级越高*/
bottom: 10px;
left: 45%;
background-color: rgba(255,255,255,0.4); padding-top: 4px;
padding-bottom: 4px;
border-radius: 9px; /*高度一半 = 8px + 10px (li的height) */
/*border: 2px solid red;*/
}
#buttons ul{
list-style-type: none;
}
#buttons ul li{
float: left;
margin-left: 6px;
width: 10px;
height: 10px;
line-height: 10px;
border-radius: 100%;
background-color: #FFFFFF;
}
#buttons ul li:hover{
cursor: pointer; /*手型光标*/
background-color:#FF5000;
}
#buttons .active{
background-color: #FF5000;
}
#next , #prev{
position: absolute;
z-index:;
top: 43%;
color: rgba(255,255,255,.9);
font-family: "微软雅黑";
font-size: 25px;
text-align: center;
display: block;
width: 40px ;
height: 40px;
line-height: 40px;
border-radius: 100%;
background-color: rgba(0,0,0,.4);
transition: width 0.3s ,height 0.3s ,line-height 0.3s ,border-radius 0.3s, text-align 0.3s ,ease 0.3s ;
}
#prev{
left: 5%;
}
#next{
right: 5%;
}
#next:hover{
cursor: pointer; /*手型光标*/ width: 44px;
height: 44px;
line-height: 44px;
border-radius:100%;
text-align: center;
}
#prev:hover{
cursor: pointer; /*手型光标*/ width: 44px;
height: 44px;
line-height: 44px;
border-radius:100% ;
text-align: center;
}
</style>
布局效果图：
JS部分
<script type="text/javascript">
var doc = document;
var sliderId = doc.getElementById('slider');
var sliderImgsId = doc.getElementById('sliderImgs');
var imgs = sliderImgsId.getElementsByTagName('img');
var btnLi = doc.getElementById('buttons').getElementsByTagName('li');
var btnPrev = doc.getElementById('prev');
var btnNext = doc.getElementById('next'); var imgsLength = imgs.length-2; //减去2个假图
var btnLiLength = btnLi.length;
var imgWidth = sliderId.clientWidth; //获取图片宽度
var imgAnimateTimer = null; //图片animate定时器
var aotuPlayTimer = null; //自动播放定时器
var index = 0; //当前图片默认为第一张
var speed = 0; //动画速度,这个数必须是能被图片宽度500整除的。正负表示偏移方向 /*非常重要*/
var isAnimate = false; //图片是否在动画状态。若在动画状态，此时动画没结束， 则不执行下一个动画。 sliderImgsId.style.left = -imgWidth+"px"; //初始化为第一张真图 btnPrev.onclick = function(){
if(isAnimate == false){ //图片不在动画状态才执行
imgAnimate(imgWidth);
index--;
if(index<0){
index = imgsLength-1;
}
selectBtn();
}
}
btnNext.onclick = function(){
if(isAnimate == false){
imgAnimate(-imgWidth);
index++;
if(index>imgsLength-1){
index = 0;
}
selectBtn();
}
} for(var i = 0 ; i<btnLiLength;i++){
btnLi[i].index = i;
btnLi[i].onclick = function(){
var toTargetImgOffset = (index - this.index)*imgWidth; //负数sliderimgsId向左偏转，反之，向右
if(toTargetImgOffset == 0){return;} if(isAnimate == false){
imgAnimate(toTargetImgOffset); //方法的参数是局部参数
index = this.index;
selectBtn();
} }
} function selectBtn(){
for(var i = 0; i < btnLiLength; i++){
if(btnLi[i].className == "active"){
btnLi[i].className = "";
break;
}
}
btnLi[index].className = 'active';
} /*动画函数*/
function imgAnimate(offset){
var newLeft = parseInt(sliderImgsId.style.left) + offset; //sliderImgsId.style.left永远获取都是当前图片偏移量
var allTime = 400; //完成offset偏移量，总共所用时间。offset路程一定，时间越短，速度越快。此时间必须小于autoPlay间隔时间，否则，图片运动还没结束，ImgAnimate()再次被调用
var interval = 20; //定时器的间隔时间，值越小越好，因为越大，动画越卡
var speed = offset/(allTime/interval); //speed正负由offset决定 isAnimate = true; //图片动画开始
clearInterval(imgAnimateTimer);
imgAnimateTimer = setInterval(function(){
sliderImgsId.style.left = parseInt(sliderImgsId.style.left)+speed +"px";
/* 第一种情况：当speed<0时,(即图片向左运动时)
* 如果当前图片left值 , left只会越来越小 , 当小于等于newLeft , 则停止图片运动
* 第二种情况：当speed>0时,(即图片向右运动时)
* 如果当前图片的left , left只会越来越大 , 大于等于newLeft , 则停止图片运动
* */
if( speed<0 && parseInt(sliderImgsId.style.left)<= newLeft || speed>0 && parseInt(sliderImgsId.style.left) >= newLeft){
clearInterval(imgAnimateTimer); //到达指定newleft位置停止动画
isAnimate = false; //动画执行结束 /*重新定位-- 让图片无限循环 --start*/
if(newLeft > -imgWidth){
sliderImgsId.style.left = -imgsLength*imgWidth +"px" ;
return;
}
if(newLeft < -imgsLength*imgWidth){
sliderImgsId.style.left = -imgWidth +"px" ;
return;
}
sliderImgsId.style.left = newLeft+"px";
/*重新定位-- 让图片无限循环 --end*/ /*图片运动结束后。清除上一次定时器时间*/
window.onload();
}
},interval);
} window.onload = function(){
if(isAnimate==false){
clearInterval(aotuPlayTimer);
aotuPlayTimer = setInterval(function(){
btnNext.onclick();
},5000); //图片每格5s移动一次
}
}
/*鼠标移入sliderId事件*/
sliderImgsId.onmouseover = function(){
clearInterval(aotuPlayTimer);
}
/*鼠标移出sliderId事件*/
sliderImgsId.onmouseout =function(){
window.onload();
} </script>
纯JS实现轮播图特效——详解的更多相关文章
- 2、原生js实现轮播图特效
很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...
- JS实现轮播图特效（带二级导航）
按照国际惯例先放效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- k 近邻算法(k-Nearest Neighbor，简称kNN)
预约助教问题: 1.计算1-NN,k-nn和linear regression这三个算法训练和查询的时间复杂度和空间复杂度? 一. WHy 最简单最初级的分类器是将全部的训练数据所对应的类别都记录下来 ...
- QT 编译遇到重定义；不同的基类型&在QT中使用C++ lib库
最近在使用osg和qt开发,在集成osg时候因为我使用的qt版本为非opengl的版本,导致qt自己封了一遍opengl的一些基类变量如double 这时候就会跟osg中声明的opengl的类型冲突, ...
- 把IDEA中新建的项目提交到Github仓库中
对于一个没有进行任何版本控制设置的idea工程,使其支持Github,设置步骤如下 到Git官网下载Git的安装包,安装好以后,Git的安装目录下的文件结构应该如下图所示 在IDEA开发工具中配置Gi ...
- IIS Post 大小超出允许的限制
IIS限制默认POST的长度是4096 Byte 在IIS——配置编辑器——system.web/httpRuntime的maxRequestLength 或者在web.config文件中的syste ...
- Angular4 微信的坑
1.不要重置对象的引用!(重置只应该在组件或服务的初始化时) why:会使页面产生闪烁 2.不要给图片绑定一个空的值或空的图片引用(如果值从服务器异步过来,那应该在初始化时给它一个默认值) why:会 ...
- [使用经验]cocostudio UI编辑器的裁剪
日志-2015/03/16 描述:在程序使用UI编辑器导出文件的时候,该panel中大于panel的部分都没有显示出来,例如人物,一些特效等 原因:UI编辑器panel都勾上了裁剪 解决:在编辑器中把 ...
- sudo:*:command not found
原因:执行sudo后,sudo会根据visudo里面配置的secure_path来找寻命令,所以sudo尽量使用绝对路径 sudo bash-c "echo $PATH"也可以看到 ...
- Ubuntu双系统安装过程中遇到的问题
1.在第六步选择时区的时候,会报错,这时候可以选择断开网络(取消右上角的网络选项)! 2.用easybcd添加启动项以后,无法进入,F12进入BIOS,选择Ubuntu进入,因为以前的BIOS BOO ...
- BUG Review：关于getting 'android:xxx' attribute: attribute is not a string value的问题及解决方法
我们在使用Android Studio开发完应用程序后,都要将打好的apk安装包上传到各大应用市场,但是有时候上传时应用市场会出现提交的安装包不能通过应用市场的aapt解析而被打回的情况. 他们使用a ...
- 鉴定JavaScript中的数据类型
众所周知,JavaScript是一门弱类型的语言,但是这并不代表JavaScript中没有数据类型.JavaScript中常见的数据类型有string.number.object等等,通常我们使用ty ...