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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
js实现自定义路由
Feb 04 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
vue中如何去掉空格的方法实现
Nov 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
python抓取网页内容示例分享
2014/02/24 Python
python Django框架实现自定义表单提交
2016/03/25 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Numpy之文件存取的示例代码
2018/08/03 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
mac使用python识别图形验证码功能
2020/01/10 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
百联网上商城:i百联
2017/01/28 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
离婚财产分割协议书
2015/08/11 职场文书
MySQL的join buffer原理
2021/04/29 MySQL