很棒的一组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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
微信小程序 页面跳转传递值几种方法详解
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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
php 可变函数使用小结
2018/06/12 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
python 写的一个爬虫程序源码
2016/02/28 Python
浅谈Python中函数的参数传递
2016/06/21 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
消防安全承诺书
2014/05/22 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2014年班组工作总结
2014/11/20 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby