Banner轮播图片实践

参考文章链接：手把手原生js简单轮播图 https://www.cnblogs.com/LIUYANZUO/p/5679753.html

背景：在参考文章之前，知道轮播图的实现原理与计时器Interval，和多张图片排版相关。把多张轮播的图片视为一幅横向长图，通过容器布局调整显示视口的偏移量实现单图轮播。

1、布局应有两层嵌套container(div)->bannerList(div)->banner(Img)

bannerList作为放置一幅长图的容器，而container作为可见视口的容器

img{width: 450px;height:300px;margin:0 auto}
#bannerList{width:1800px;height:300px;left: -450px; z-index: 1;position: absolute;  //放置4张图片，left的设值是为了显示第二张图片开始，且方便js的取值（js所有的offset为负值）
}
#bannerList img{float: left}#container {position: relative;width: 450px; height: 300px;border: 3px solid #333; overflow: hidden;  //container视口刚好是图片大小}

2、添加左右翻页按钮，以及圆点按钮

从参考文章学到了用span元素制作圆点，详情可参考文章

主要是用css样式属性边框弧度border-radius，而左右翻页使用&gt；和&lt；（新学到的技能哈~）

3、通过js实现功能

实现左右翻页功能：

事先获取翻页的按钮next、prev、bannerList和container的元素

function getNav(offset){left=window.getComputedStyle(banner)['left'];//banner.style.top 获取到的是行内样式的top数值，默认为'',parseInt('') = NAN//即<元素内>newLeft=parseInt(left)+offset;banner.style.left=newLeft+'px';   //直接将数值赋值给样式leftif(newLeft<-1350){ //当newLeft 小于-1350（数值大于1350），则将left设为0；banner.style.left = 0 + 'px'; /* alert("This the last photo");*/}if(newLeft>-0){banner.style.left = -1350 + 'px';/*alert("This the first photo");*/}
}

与参考文章不一样的是，我这里的left属性不是在元素内定义的，而是通过CSS设置值，如果使用banner.style.top得到的是NAN，因此需要使用getComputedStyle(element)['Attriubute']来获取当前元素的left位置。

var container=document.getElementById("container")
EventUtil.addHandler(container,"click",function(event){var event=EventUtil.getEvent(event);var target=EventUtil.getTarget(event);switch(target.id){case "next": getNav(-450); break;case "prev": getNav(450); break;}});

然后为两个翻页按钮注册事件处理程序，这里是用了上一篇文章的跨浏览器的EventUtil对象中的方法（详情看上一篇）

当点击next，bannerList向右平移450px，则显示另一张图片；prev同理。

*值得注意这里的偏移是相对于左边第一张图位置，因此负值表示将第一张图向左移动Xpx，而视觉看出来的是bannerList向右平移Xpx。

自动轮播功能：

setInterval( )&clearInterval( )

第一个方法的参数：函数&每隔一段时间；

第二个方法的参数：setInterval赋值的变量，var timer=setInterval( );则timer为参数

var timer;
function autoPlay() {timer = setInterval(function () {next.οnclick=getNav(-450);}, 1500)
}
autoPlay();
container.οnmοuseοver=function(){clearInterval(timer);
}
container.οnmοuseοut=function(){autoPlay();
}

参考文章里是直接使用onclick();而在实际运行时候，会抛出错误说这不是一个函数，因此需要为onclick绑定一个函数。

onmouseover和onmouseout是显示当鼠标放在图片上时，可以停止自动轮播观看图片。

*虽然这两个功能事后看来十分简单，但对于我在实现时，耗时也需要蛮长时间，这可能就是实践与看的不同。以我的理解阅读完参考文章后，根据自己理解的实现原理，通过自己重新编写代码来实现功能，仅为学习以及临摹，不存在抄袭的意图。该文为原创，但由于这篇带有参考的文章，如侵删。

再次感谢参考文章的作者让我学习到轮播的简单实现！

参考文章链接：手把手原生js简单轮播图 https://www.cnblogs.com/LIUYANZUO/p/5679753.html

Banner轮播图片实践相关推荐

自定义Banner轮播图片
//activity_main <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...
js轮播图片小圆点变化_JavaScript banner轮播左右切换圆点点击切换
JavaScript banner轮播左右切换圆点点击切换 #banner { overflow:hidden; width:100%; height:400px; position:relati ...
游戏陪玩源码开发，仿某看书app首页Banner轮播+背景渐变
在游戏陪玩源码开发时,会设计到很多UI界面设计,其中首页Banner轮播就很重要,最近发现一个比较有意思的效果图,于是想自己操作实践下.效果图如下: 作者实现的效果: 1. 游戏陪玩源码开发,仿某看书 ...
php轮播代码生成器,最简单的Banner轮播左右切换效果代码及实现思路（附带源码）...
Banner轮播左右切换效果代码及实现思路,支持左右切换图片,支持点击选择对应的图片.实现思路通过定时器去自动选图和点击触发事件去选择图片.而图片的选择是通过计算对应图片的宽度和第几张图的距离进行动画 ...
【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
文章目录一.flutter_swiper 插件二.Swiper 组件使用三.完整代码示例四.相关资源一.flutter_swiper 插件到 https://pub.dev/package ...
java实现轮播图片_Banner框架实现图片轮播
Banner 实现图片轮播简介导入自定义样式快捷使用总结 Blog如有不对,敬请斧正喜欢Android的可以关注我,日常更新Android干货看都看到这了,加个关注叭! 简介 Banne ...
点击轮播图片，链接跳转错误
<#if (InfoList?size > 0)><#list InfoList as newsInfo><li class="slider-li1&qu ...
html中制作banner,css banner轮播图怎么做？
css banner轮播图怎么做?下面本篇文章给大家简单介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 初步了解动画效果吧.轮播图我一直以为靠jquery插件完成的,突然发 ...
AxureRP实战（三）Banner轮播图交互（进阶篇）
前一篇<AxureRP实战(二)Banner轮播图交互(基础篇)>用淘宝的首页banner案例讲解了如何运用动态面板实现banner轮播图的切换,有了基本交互功能.但是,交互效果还有些欠缺 ...

Banner轮播图片实践

Banner轮播图片实践相关推荐

最新文章

热门文章