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 咨询 或 ...
随机推荐
- CIO必看：跨国集团采购部报表系统的建设经验分享
CIO必看:跨国集团采购部报表系统的建设经验分享 引言 福耀集团是国内最具规模.技术水平最高.出口量最大的汽车玻璃生产供应商,产品"FY"商标是中国汽车玻璃行业第一个"中 ...
- Centos下grep命令简介
grep命令简介 grep 是一个最初用于Unix操作系统的命令行工具.在给出文件列表或标准输入后,grep会对匹配一个或多个正则表达式的文本进行搜索,并只输出匹配(或者不匹配)的行或文本. grep ...
- Xcode 下删除Provisioning Profiles文件
Xcode 中有很多不可以用的Provisioning Profiles 文件,每次选择手机证书时,看着那么长的菜单很烦有木有? 在Xcode 5中删除 Provisioning Profiles,打 ...
- OpenCV 1 图像分割--分水岭算法代码
// watershed_test20140801.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" // // ch9_watershed ...
- LeetCode(43)-Contains Duplicate II
题目: Given an array of integers and an integer k, find out whether there are two distinct indices i a ...
- 和菜鸟一起学linux之dlna的学习记录
关于DLNA框架 1.Networking & Connectivity 为了解决物理设备连通问题, 主要依赖于Ethernet,802.11,Ipv4协议栈,Ipv6协议栈. TCP/IP协 ...
- 容器（list集合）
--为什么使用集合而不使用数组?why ·集合和数组相似点:都可以存储多个对象,对外作为一个整体存在: ··数组的缺点:1.长度必须在初始化时指定,且固定不变: 2.数组采用连续存储空间,删除和添加元 ...
- 排序算法入门之快速排序（java实现）
快速排序也是一种分治的排序算法.快速排序和归并排序是互补的:归并排序将数组分成两个子数组分别排序,并将有序的子数组归并以将整个数组排序,会需要一个额外的数组:而快速排序的排序方式是当两个子数组都有序时 ...
- JAVA学习总结-面向对象
前言:java面向对象中的知识可以说是整个java基础最核心的部分,不知不觉已经学完快2个月了,是时候复习一波了,刚开始学习的时候被绕的很懵逼,这次总结完毕之后有了很多新的感悟,这就是所谓的每有会意, ...
- 公司内网搭建代理DNS使用内网域名代替ip地址
企业场景 一般在企业内部,开发.测试以及预生产都会有一套供开发以及测试人员使用的网络环境.运维人员会为每套环境的相关项目配置单独的Tomcat,然后开放一个端口,以 IP+Port 的形式访问.然而随 ...