很棒的一组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 相关文章推荐
javascript object array方法使用详解
Dec 03 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 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 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
Javascript的this用法
2017/01/16 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python字典简介以及用法详解
2016/11/15 Python
python实现12306火车票查询器
2017/04/20 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python主线程捕获子线程的方法
2018/06/17 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Python多分支if语句的使用
2020/09/03 Python
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
业务员自荐信范文
2014/04/20 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
班主任先进事迹材料
2014/12/17 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
同学会演讲稿
2019/04/02 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers