很棒的一组js图片轮播特效


Posted in Javascript onJanuary 12, 2017

大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢

先看一眼效果图:

很棒的一组js图片轮播特效

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{padding:0;margin:0;}
#content{width:550px;height:300px;margin:50px auto;position:relative;}
#content input{width:60px;height:30px;margin-right:10px;}
#content div{diplay:inline-block;position:absolute;bottom:0;;border:1px solid #ccc;width:250px;height:250px;background:url(img/loader_ico.gif) no-repeat center #f1f1f1;}
#content div.left{left:0;}
#content div.right{right:0;}
#content div span{display:inline-block;width:250px;height:30px;line-height:30px;background:#ccc;color:red;text-align:center;}
#content div img {height:250px;width:250px;}
</style>
<script>
window.onload = function () {
 var content = $('content'),prev = $('prev'),next = $('next'),
 left = $('left'),right = $('right');
 var aSpan = content.getElementsByTagName('span');
 var aImg = content.getElementsByTagName('img');

 var arr = [
 ['img/1.png','img/2.png','img/3.png','img/4.png'],
 ['img/2.png','img/3.png','img/4.png']
 ];
 var num = [0, 0];


 // 初始化
 for ( var i = 0; i < aSpan.length; i++ ) {
 carousel(i);
 aImg[i].index = i;
 aImg[i].onclick = function () { 
 if (num[this.index] === arr[this.index].length - 1) num[this.index] = -1;
 num[this.index]++;
 carousel(this.index);
 }
 }

 // 下一组
 next.onclick = function () {
 for ( var i = 0; i < aSpan.length; i++ ) {
 if (num[i] === arr[i].length - 1) num[i] = -1;
 num[i]++;
 carousel(i);
 }
 }
 // 上一组
 prev.onclick = function () {
 for ( var i = 0; i < aSpan.length; i++ ) {
 if (num[i] === 0) num[i] = arr[i].length;
 num[i]--;
 carousel(i);
 }
 }
 function carousel(index) {
 aSpan[index].innerHTML = num[index] + 1 + ' / ' + arr[index].length;
 aImg[index].src = arr[index][num[index]];
 }

 function $(id) {return document.getElementById(id);}
}
</script>
</head>
<body>
<div id="content">
 <input type="button" value="上一组" id="prev" />
 <input type="button" value="下一组" id="next" />
 <div class="left">
 <span>图片数量加载中</span>
 <img />
 </div>
 <div class="right">
 <span>图片数量加载中</span>
 <img />
 </div>
</div>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 #Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 #Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 #Javascript
js实现微博发布小功能
Jan 12 #Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 #Javascript
canvas实现绘制吃豆鱼效果
Jan 12 #Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 #Javascript
You might like
生成卡号php代码
2008/04/09 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
Python计算三维矢量幅度的方法
2015/06/15 Python
Python单例模式实例详解
2017/03/01 Python
Python 私有函数的实例详解
2017/09/11 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python中有几个关键字
2020/06/04 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
土木工程专业推荐信
2014/02/19 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers