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 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
使用python实现多维数据降维操作
2020/02/24 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
shell程序中如何注释
2012/02/17 面试题
创建无烟单位实施方案
2014/03/29 职场文书
初中学生评语大全
2014/04/24 职场文书
白血病募捐倡议书
2014/05/14 职场文书
见习报告格式范文
2014/11/08 职场文书
售房协议书范本
2015/08/11 职场文书
优质护理心得体会
2016/01/22 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
python微信智能AI机器人实现多种支付方式
2022/04/12 Python