Web前端原生JavaScript浅谈轮播图
1、一直来说轮播图都是困扰刚进业内小白的一大难点，因为我们不仅需要自己作出一个比较完美的运动框架（虽然网上一抓一大把，但是哪有比自己做出来实现的有成就感，不是吗？^_^），还必须需要非常关键性的把握住轮播的原理，这样才能把一个轮播图完美的呈现出来。
2、废话不多说，请看下面代码
//首先我们必须都明确，一个好的运动框架那必须是能够同时承载两种或多种以上需求的，所以我们应该避免单运动框架通过行内样式的局限性，就需要我们知道怎么去获取非行间样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]
}
}
//以上我们用函数去封装一个获取非行间样式的方法方便我们以后使用 //开始封装运动框架
function move(obj,json,fn){
clearInterval(obj.timer)
obj.timer =setInterval(function(){
var bStop = true;
for(var attr in json){
var initialVal = 0;
if(attr == "opacity"){
initialVal = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
initialVal = parseInt(getStyle(obj,attr));
}
var speed = (json[attr]-initialVal)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(initialVal != json[attr]){
bStop = false;
}
if(attr == "opacity"){
obj.style.opacity = (initialVal+speed)/100;
obj.style.filter = "alpha(opacity:"+(initialVal+speed)+")";
}else{
obj.style[attr] = initialVal+speed+"px";
}
if(bStop){
clearInterval(obj.timer);
fn && fn();
}
}
},30)
}
//上面一个运动框架就做好了,现在只需要我们调用即可,当然这种类型的框架还不是最完美的,有些功能还无法实现,所以我上面一直说比较完美,但这已经足够用啦...
第二步: 轮播图
<!--首先我们来写一个简单的html和css-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0}
#banner{
width: 800px;
height:400px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
#banner>ul{
position: absolute;
}
#banner>ul>li{
float: left;
list-style: none;
}
#banner>ul>li>img{
width:800px;
height: 400px;
border-radius: 15px;
} #cut>a{
width: 80px;
height: 40px;
background:rgba(228,23,221,0.5);
;border-radius: 10px;
text-decoration: none;
text-align: center;
font-weight: bold;
font-size: 30px;
color: pink;
position: absolute;
top:180px;
display: block;
line-height: 40px;
}
#cut>a:nth-child(2){
right:0;
} #btn{
position: absolute;
top: 350px;
left: 350px;
}
#btn>a{
width: 20px;
height: 20px;
border-radius: 50%;
background:yellowgreen;
margin-right:6px;
float: left;
}
#btn>.active{background:yellow;}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="data:images/1.jpg"></li>
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
<li><img src="data:images/5.jpg"></li>
</ul>
<div id="cut">
<a href="##"><</a>
<a href="##">></a>
</div>
<div id="btn">
<a href="##" class="active"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</div>
</body>
</html>
<!--上面我的一个简单的布局，我就不多说了，下面请看我们的关键轮播图吧-->
无缝轮播图---> 当我们拿到需求时，我们会要立马想到无缝轮播是一种图片从左至右的滑动式切换，那肯定是通过切换ul（按我上述的HTML来说）的left值从而达到效果的，请看下面代码
var oBan =document.getElementById("banner");
var oli =oBan.getElementsByTagName("li");
var oul= oBan.getElementsByTagName("ul")[0];
var index = 0;
var timer = null;
//想要实现无缝轮播，关键就是使用一种偷梁换柱的障眼法去掩盖用户的视觉差
var li =oli[0].cloneNode(true);
oul.appendChild(li);
//为了方便以后的代码维护
var iw =oli[0].offsetWidth;
oul.style.width =iw*oli.length+"px";
//轮播原理
function cutImg(){
move(oul,{left:-index*iw});
//当图片切换时，需要下面的小店同步进行切换
for(var i = 0;i<oBtn.length;i++){
oBtn[i].className = "" ;
}
oBtn[index>oBtn.length-1?0:index].className = "active";
}
//轮播的自动播放
function autoP(){
//这一步的目的在于当图片处于最后一张图时，我们怎么通过一个障眼法使图片变成我们想要的下一张图
timer=setInterval(function(){
if(index == oli.length-1){
index = 1;
oul.style.left = 0;
}else{
index++
}
cutImg()
},3000)
}
autoP()
//当我们鼠标移上时，轮播停止，鼠标移开轮播继续
oBan.onmouseover = function(){
clearInterval(timer);
}
oBan.onmouseout = function(){
autoP();
}
// 轮播图中的点击小点图片切换
var oBtn = document.getElementById("btn").getElementsByTagName("a");
for(var i = 0;i<oBtn.length;i++){
oBtn[i].onclick = function(){
oBtn[i].iNow = i;
for(var j = 0;j<oBtn.length;j++){
oBtn[j].className = "";
}
this.className ="active" ;
move(oul,{left:-this.iNow*iw})
}
}
// 轮播图中左右切换按钮切换
var oCut =document.getElementById("cut").getElementsByTagName("a");
//点击右边按钮切换到第一张图时，我们下一步想要得到的倒数第二张图
oCut[1].onclick = function(){
if(index == oli.length-1){
index = 1;
oul.style.left = 0;
}else{
index++
}
cutImg()
}
oCut[0].onclick = function(){
if(index == 0){
index = oli.length -2;
oul.style.left = -(oli.length-1)*iw;
}else{
index--;
}
cutImg()
}
//这样一个无缝轮播图就做好啦！！
上面是我对轮播图的一个基本构思和大致框架，希望融合大家各位技术大牛们
的思想加以优化，谢谢大家。。。。
Web前端原生JavaScript浅谈轮播图的更多相关文章
- 浅谈轮播图（原生JavaScript实现）
现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...
- 原生javascript之实战 轮播图
成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: <div class="wr ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
- 原生JavaScript之“淘宝轮播图”
轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
随机推荐
- 2DSprite添加Light照射（Unity3D开发之十六）
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/45534245 ...
- 【生活随笔】Introspection of my life in 2014
2014年已过去两星期,有写年度总结的必要了.今天特意看了看去年1月5日写的2013年度总结,看看都有些什么变化.我发现每年作一次总结是很有必要的,无赖恰逢考试周,连元旦都不能好好过,更不用说写 ...
- ping通windows下虚拟机上的linux系统
直接ping linux的ip 直接就失败了. 现在我的windows有两个虚拟网卡 接下来让linux使用VMnet8网卡 修改我的linux系统下的lo网卡的ip地址为VMnet8的ip地址 现 ...
- tomcat中的线程问题2
最近在看线程的有关知识,碰到一个小问题,目前还没有解决,现记录下来. 如果在我们自己写的servlet里有成员变量,因为多线程的访问就会出现一些线程问题.这点大家都知道,我们看下面的例子. publi ...
- linux socket编程之TCP与UDP
转:http://blog.csdn.net/gaoxin1076/article/details/7262482 TCP/IP协议叫做传输控制/网际协议,又叫网络通信协议 TCP/IP虽然叫传输控制 ...
- linux服务搭建----ssh服务开启
//ssh 服务 ssh 192.168.88.254 如何开启 service sshd restart 关掉该服务 servicesshd stop ...
- C语言可变参实现参数累加返回
C语言可变参的作用真的是非常大,自从发表了可变参如何实现printf,fprintf,sprintf的文章以来,便有不少博友私信问我实现的机制,我也解释了相关的知识点.今天,我们借着这个机会,再来举一 ...
- uc伯克利人工分割图像.seg文件解析
之前看到 http://www.eecs.berkeley.edu/Research/Projects/CS/vision/grouping/segbench/ 提供的人工图像分割的.seg格式 ...
- Windows7安装Pygame软件
1. 工具包下载地址: Python下载地址: https://www.python.org/downloads/ pip下载地址:https://pypi.org/project/pip/#file ...
- WPF如何得到一个在用户控件内部的元素的坐标位置
例如有这样一个用户控件: <UserControl d:DesignHeight="100" d:DesignWidth="200" ...> &l ...