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】#15 3Sum
一天一道LeetCode系列 (一)题目 Given an array S of n integers, are there elements a, b, c in S such that a + b ...
- ANDROID 中设计模式的采用--结构型模式
结构型模式中的适配器模式.外观模式.装饰模式.代理模式都属于包装模式,都是对另外的类或对象的包装,只是各自的意图不同. 适配器模式通过对另外的类或对象的包装,将其接口转换为用户期望 ...
- CentOS删除自带的java，安装新java
[root@localhost ~]# java -version java version "1.4.2″ gij (GNU libgcj) version 4.1.2 20071124 ...
- 测试驱动开发TDD(test drive development)
classpath,路径列表.告诉java需要加载类的存放位置, java会去搜寻.这种机制实现了动态加载. java -cp 加载类路径 执行类名 : 加载类路径可是绝对,也可以相对. 代码重构 ...
- django-debug-tools 使用
用django开发很快也很容易,但是很多时候我们的经验并不是很足,就会给自己挖下很多坑,不管是性能问题,还是开发语言使用技巧问题都会给应用的稳定带来危害, 开发之后的调试和调优就显得很重要,今天就尝试 ...
- mac os X中关于dayone缓存的实际文件位置
最近刚安装了mac版的dayone软件,感觉蛮不错的!以前一直用iphone版的,mac版是要米的,68米丫!想了想还是一咬牙:买了! 我用的是iCloud同步,虽然资料放在云中,但本地还是会有缓存的 ...
- 从Windows角度看Mac OS X上的软件开发
如果原来从事Windows软件开发,想跨足或转换至Mac OS X环境,需要知道那些东西?有什么知识技能可以快速运用在Mac OS X环境上的?这两个问题应该是Windows开发者进入Mac OS X ...
- spring的优缺点
它是一个开源的项目,而且目前非常活跃:它基于IoC(Inversion of Control,反向控制)和AOP的构架多层j2ee系统的框架,但它不强迫 你必须在每一层 中必须使用Spring,因为它 ...
- List非0连续片段的索引
import pandas as pd import numpy as np l = [0, 11, 23, 33, 0, 0, 0, 76, 0, 41, 68] df = pd.DataFrame ...
- Microsoft C++ 异常: std::system_error std::thread
第一次使用std::thread,把之前项目里面的Windows的thread进行了替换,程序退出的然后发生了std::system_error. 经过调试,发现std::thread ,join了两 ...