无限循环轮播图之JS部分(原生JS)
JS逻辑与框架调用,
- <script type="text/javascript">
- var oBox = document.getElementById('box');
- var oPrev = document.getElementById('prev');
- var oNext = document.getElementById('next');
- var oUl = oBox.children[0];
- var aLi = oUl.children;
- var aBtn = document.getElementById('btn').children;
- aLi[0].style.left = 0;//把第一张图片设置当前位置
- var iNow = 0;
//下一张- oNext.onclick = function(){
- move(aLi[iNow],{left:-400});//当前图片向左运动
- iNow++;
- if (iNow == aLi.length) {
- iNow = 0;
- }
- aLi[iNow].style.left = 400+'px';//下一张在右边准备
- move(aLi[iNow],{left:0});//运动到当前位置
- tab()
- }
- // 上一张
- oPrev.onclick = function(){
- move(aLi[iNow],{left:400})
- iNow--;
- if (iNow < 0) {
- iNow = aLi.length-1;
- }
- aLi[iNow].style.left = -400+'px';
- move(aLi[iNow],{left:0})
- tab()
- }
- // 点击按钮
- for(var i = 0 ;i < aBtn.length ; i++){
- (function(index){
- aBtn[i].onclick = function(){
- if (index == iNow) {
- return;
- }else if (index < iNow ) { //点击的按钮在当前位置的左边
- move(aLi[iNow],{left:400});
- aLi[index].style.left = -400+'px';
- move(aLi[index],{left:0})
- }else if (index > iNow) {//点击的按钮在当前位置的右边
- move(aLi[iNow],{left:-400})
- aLi[index].style.left = 400+'px';
- move(aLi[index],{left:0})
- }
- iNow = index
- tab();
- }
- })(i);
- }
- // 为按钮添加样式
- function tab(){
- for (var i = 0; i < aBtn.length; i++) {
- aBtn[i].className ='';
- }
- aBtn[iNow].className = 'on';
- }
- </script>
无限循环轮播图之JS部分(原生JS)的更多相关文章
- 无限循环轮播图之结构布局(原生JS)
html部分 <div class="box" id="box"> <ul> <li><img src="i ...
- 无限循环轮播图之运动框架(原生JS)
封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...
- 利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
- Android无限循环轮播广告位Banner
Android无限循环轮播广告位Banner 现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner ...
- iOS swift版本无限滚动轮播图
之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...
- 移动端轮播图实现方法(dGun.js)
本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...
- JS-特效 ~ 01. 事件对象、offset偏移/检测、无缝滚动、自动循环轮播图
Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取 ...
- 超级详细 一听就会:利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
随机推荐
- Online Judge(OJ)搭建(第一版)
搭建 OJ 需要的知识(重要性排序): Java SE(Basic Knowledge, String, FileWriter, JavaCompiler, URLClassLoader, Secur ...
- FFmpeg学习6:视音频同步
在上一篇文章中,视频和音频是各自独立播放的,并不同步.本文主要描述了如何以音频的播放时长为基准,将视频同步到音频上以实现视音频的同步播放的.主要有以下几个方面的内容 视音频同步的简单介绍 DTS 和 ...
- SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...
- 对抗假人 —— 前后端结合的 WAF
前言 之前介绍了一些前后端结合的中间人攻击方案.由于 Web 程序的特殊性,前端脚本的参与能大幅弥补后端的不足,从而达到传统难以实现的效果. 攻防本为一体,既然能用于攻击,类似的思路同样也可用于防御. ...
- Android Button的基本使用
title: Android Button的基本使用 tags: Button,按钮 --- Button介绍: Button(按钮)继承自TextView,在Android开发中,Button是常用 ...
- Android 7.1 - App Shortcuts
Android 7.1 - App Shortcuts 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Shortcuts 文中如有纰漏,欢迎大家留言 ...
- java设计模式之--单例模式
前言:最近看完<java多线程编程核心技术>一书后,对第六章的单例模式和多线程这章颇有兴趣,我知道我看完书还是记不住多少的,写篇博客记录自己所学的只是还是很有必要的,学习贵在坚持. 单例模 ...
- 使用Git Bash远程添加分支和简单部署你的静态页面
新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...
- Android—Service与Activity的交互
service-Android的四大组件之一.人称"后台服务"指其本身的运行并不依赖于用户可视的UI界面 实际开发中我们经常需要service和activity之间可以相互传递数据 ...
- BZOJ 3238: [Ahoi2013]差异 [后缀数组 单调栈]
3238: [Ahoi2013]差异 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 2326 Solved: 1054[Submit][Status ...