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 咨询 或 ...
随机推荐
- 仿百度壁纸客户端（六）——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
仿百度壁纸客户端(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度 ...
- 测试AtomicInteger与普通int值在多线程下的递增操作
日期: 2014年6月10日 作者: 铁锚 Java针对多线程下的数值安全计数器设计了一些类,这些类叫做原子类,其中一部分如下: java.util.concurrent.atomic.AtomicB ...
- Android TV listView焦点平滑移动
先上TV上效果图 Mark下思路: package com.test.ui; import java.lang.reflect.Method; import android.annotation.Su ...
- Which SQL statement is the trump card to the senior software developer
Which SQL statement is the trump card to the senior software developer MA Genfeng ...
- Java工程师成神之路思维导图
前面看Hollis的微信公众号更新了Java工程师成神之路的文档,感觉里面的内容清晰.齐全,可以用来审视自己,也能够知道自己在那些方面可以继续前行,想着有时间把它画下来,画下来之后分享出来. 主要内容 ...
- iOS使用第三方管理工具
1.安装cocoaPods 移除当前镜像,因为需要FQ跨域访问 001.gem source --remove https://rubygems.org/ 使用淘宝镜像安装 002.https://r ...
- 解决：MySQL 报错：1045 - Access denied for user 'root'@'localhost'(using password YES)
一.前言 今年疯狂迷上了开源,只要看到好的开源项目,就会不顾一切一股脑扎进去研究,五一期间发现一个很好的关于众筹的开源项目,但不巧,这个项目竟然是 PHP 写的,没学过 PHP,自然对这个开源项目毫无 ...
- Populating Next Right Pointers in Each Node(I and II)
Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...
- jquery性能优化的38个建议
一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); ...
- Windows 2003 Server 标准版启动问题解决（资源转贴）
维护的系统之一是部署在windows2003 Server标准版的服务器上,可能是由于某个应用问题,导致远程重启失败,害得我在机房呆了一早晨,可算是够折腾的.最后按照官方文档解决,刚放文档地址是:ht ...