很棒的一组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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP递归的三种常用方式
2019/02/28 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
详解vue v-model
2020/08/31 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
工地安全生产标语
2014/06/06 职场文书
实习证明格式范文
2015/06/16 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
python区块链实现简版工作量证明
2022/05/25 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android