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 咨询 或 ...
随机推荐
- LeetCode之“链表”：Merge Two Sorted Lists && Merge k Sorted Lists
1. Merge Two Sorted Lists 题目链接 题目要求: Merge two sorted linked lists and return it as a new list. The ...
- ITU-T Technical Paper： 测量QoS的基本网络模型
本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...
- SpriteBuilder中锚点的一般用法
注意:改变节点的锚点(anchor point)将会影响缩放和旋转操作,也会影响边界边框和碰撞的检测. 锚点仅仅挪动节点的视觉表现,这种改变可能与物理表现不一致. 你绝不应该错误的挪动锚点去改变节点的 ...
- OpenCV stereo matching 代码 matlab实现视差显示
转载请注明出处:http://blog.csdn.net/wangyaninglm/article/details/44151213, 来自:shiter编写程序的艺术 基础知识 计算机视觉是一门研究 ...
- javascript、ruby和C性能一瞥(1)
测试一下本地js.浏览器中的js以及ruby对于类似算法的性能.结果有些意外:浏览器js最快,本地其次当相差很小:ruby最慢而且不是一个数量级的: 因为写的匆忙,可能有重大问题没能看出来,请各位高人 ...
- rails4 new没有生成prototype.js之类的脚本解决办法
早期版本的rails在新生成程序时会在/public/javascript目录中自动放入若干个js脚本.不过在rails4.2.0中无论是否加-j选项,都不会生成这些脚本文件了.解决办法是安装prot ...
- ruby抓取web页面
一种方法是Net::HTTP.new方法,返回resp码和实际的data: require 'net/http' h = Net::HTTP.new("www.baidu.com" ...
- 使用XStream是实现XML与Java对象的转换(5)--Object Stream
八,Object Stream 之前的例子我们都是直接输出Xml成为String类型或者从String中获得并解析Xml,现在我们要处理输入流和输出流! 1,输出流(ObjectOutputStrea ...
- Copy List with Random Pointer(复杂链表复制)
输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否则判题程序 ...
- 在 Ubuntu 系统中部署 Git Server
http://blog.csdn.NET/poisonchry/article/details/11849781 虽然有很多开源的Git仓库,不过并非所有都尽人意,譬如Github,Gitlab等,不 ...