未加星标

js图片轮播手动切换特效

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
先瞄一眼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是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTML
分页:12
转载请注明
本文标题:js图片轮播手动切换特效
本站链接:http://www.codesec.net/view/524447.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(31)