js图片轮播手动切换特效


Posted in Javascript onJanuary 12, 2017

先瞄一眼js图片轮播手动切换特效图:

js图片轮播手动切换特效

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
* {padding:0px;margin:0px;}
#content {width:400px;height:400px;border:10px solid #ccc;position:absolute;top:50%;left:50%;margin-top:-200px;margin-left:-200px;}
#top,#bottom {width:400px;height:40px;background:#000;color:#fff;filter(opacity:80);opacity:0.8;text-align:center;line-height:40px;position:absolute;}
#top {top:0;}
#bottom {bottom:0;}
#prev,#next {position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;text-align:center;line-height:40px;text-decoration:none;background:#000;color:#fff;font-size:30px;font-weight:bold;}
#prev {left:10px;}
#next {right:10px;}
#img1 {width:400px;height:400px;}
#tab {position:absolute;width:400px;height:100px;margin-top:-90px;text-align:center;}
#info {margin-top:10px;font-size:20px;}
#tab input {width:70px;height:30px;}
.active { background : yellow;}
</style>
</head>

<body>
<div id="content">
 <div id="tab">
  <input id="loopBtn" type="button" value="循环切换" />
  <input id="orderBtn" type="button" value="顺序切换" />
  <p id="info">图片顺序加载中......</p>
 </div>
 <p id="top">图片数量加载中......</p>
 <a id="prev" href="javascript:;"><</a>
 <a id="next" href="javascript:;">></a>
 <p id="bottom">图片信息加载中.....</p>
 <img id="img1" />
</div>
<script>
window.onload = function () {
 var top = $('top'), bottom = $('bottom'),
  prev = $('prev'), next = $('next'),
  img = $('img1'), loopBtn = $('loopBtn'),
  orderBtn = $('orderBtn'), info = $('info'), tab = $('tab');
 // 切换图片顺序的按钮
 var btns = tab.getElementsByTagName('input');
 // 第几张图片
 var num = 0;
 // 图片url
 var picSrc = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];
 // 图片的数量
 var picLen = picSrc.length;
 // 图片信息
 var picInfo = ['高冷美女','终结者','性感美女','妖娆美女'];
 // 循环方式
 var loopMethod = 1; // 1,循环切换;0,,顺序切换 
 // 循环信息
 var loopInfo = ['图片可以从最后一张转到第一种切换','图片只能切换到最后一张或者第一张'];
 changePic();
 // 循环切换
 loopBtn.onclick = function () {
  loopMethod = 1;
  changeOrder();
 }
 // 顺序切换
 orderBtn.onclick = function () {
  loopMethod = 0;
  changeOrder();
 }
 // 上一张
 prev.onclick = function () {
  num--;
  // 1,循环切换;0,,顺序切换
  if(loopMethod) {
   if (num === -1) num = picLen - 1;
   changePic();
  } else {
   if (num === -1) {
    num = 0;
    alert('已经是第一张图片啦!');
   }
   changePic();
  }
 }
 // 下一张
 next.onclick = function () {
  num++;
  // 1,循环切换;0,,顺序切换
  if(loopMethod) {
   if (num === picLen) num = 0;
   changePic();
  } else {
   if (num === picLen) {
    num = picLen - 1;
    alert('已经是最后一张图片啦!');
   } 
   changePic();
  }
 }
 // 切换顺序
 function changeOrder () {
  // 情况按钮的高亮
  for ( var i = 0, len = btns.length; i < len;i++) {
   btns[i].className = '';
  } 
  // 循环切换 1,循环;0,顺序
  info.innerHTML = loopInfo[1 - loopMethod];
  loopMethod === 1 ? 
   loopBtn.className = 'active' :
   orderBtn.className = 'active';
 }
 // 切换图片
 function changePic () {
  changeOrder();
  top.innerHTML = num + 1 + ' / ' + picLen;
  bottom.innerHTML = picInfo[num];
  img.src = picSrc[num];
 } 
 // id选择器
 function $(id) { return document.getElementById(id);}
}
</script>
</body>
</html>

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

Javascript 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
js 小贴士一星期合集
Apr 07 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
js 调用百度分享功能
Feb 27 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 #Javascript
JavaScript定义全局对象的方法示例
Jan 12 #Javascript
Node.js制作简单聊天室
Jan 12 #Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 #Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 #Javascript
jQuery Validate 数组 全部验证问题
Jan 12 #Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
php数组添加元素方法小结
2014/12/20 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
Python生成验证码实例
2014/08/21 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python 内置函数汇总详解
2019/09/16 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
九年级化学教学反思
2014/01/28 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
护士个人总结范文
2015/02/13 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang