很棒的一组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 toggleClass 实现鼠标移上变色
May 14 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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 excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
网页常用特效代码整理
2006/06/23 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
Python实现的redis分布式锁功能示例
2018/05/29 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
从python读取sql的实例方法
2020/07/21 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
C#中的验证控件有几种
2014/03/08 面试题
会计专业自我鉴定范文
2013/12/29 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
医学检验专业自荐信
2014/09/18 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
消费者理赔投诉书
2015/07/02 职场文书
新员工入职感想
2015/08/07 职场文书