杰晶网络

js图片轮播手动切换特效
网络编程 2024/5/19 佚名
3 2

先瞄一眼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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
js手动轮播,js图片轮播,js轮播切换,js图片轮播切换
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“js图片轮播手动切换特效”
暂无“js图片轮播手动切换特效”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接