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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 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 clearstatcache()函数详解
2010/03/02 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python使用re模块验证危险字符
2020/05/21 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
销售顾问工作计划书
2014/08/15 职场文书
农村文化建设标语
2014/10/07 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
常用的Python代码调试工具总结
2021/06/23 Python
MSSQL基本语法操作
2022/04/11 SQL Server
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android