Javascript:一款简易的图片切换插件
最近迷上javascript，每天不写点什么都不舒服哈~
尽管自己能力有限，还是尽自己所能写点东西出来。
实现效果：
该插件分为两种模式：循环播放模式，以及，单向播放模式
1# 没有选择播放模式时：
2# 选择循环模式的时候，当图片播放到第一页，或者最后一页的时候，直接跳到最后一页，或者第一页继续播放
3# 选择单向播放模式的时候，当播放到第一页，或者最后一页的时候，给予提醒，图片不能向前，或者向后继续播放
贴代码：
javascript部分：
var oCircle=document.getElementById('circle');
var oSingle=document.getElementById('single');
var oImg=document.getElementById('img');
var oPrevBtn=document.getElementById('prevBtn');
var oNextBtn=document.getElementById('nextBtn');
var oPageCount=document.getElementById('pageCount');
var oImgDes=document.getElementById('imgDes');
var imgCount=['0.jpg','1.jpg','2.jpg','3.jpg'];
var imgTitle=['1tree','2run','3hit','4sun'];
var num=0;
//提取公共执行部分
function commonFun(){
oImg.src='img/'+imgCount[num];
oPageCount.innerHTML=num+1 +'/'+imgCount.length;
oImgDes.innerHTML=imgTitle[num];
}
commonFun();
//当用户没有选择播放模式时候，先提醒其选择播放模式
if (oSingle.classList.contains('btnSelect')==false && oCircle.classList.contains('btnSelect')==false ) {
oNextBtn.onclick=function(){
alert("请选择图片播放模式");
}
oPrevBtn.onclick=function(){
alert("请选择播放模式");
}
}
//开启循环播放模式
oCircle.onclick=function(){
//添加按钮选中时按钮样式变化
if (oSingle.classList.contains('btnSelect')) {
oSingle.classList.remove('btnSelect');
}
oCircle.classList.add('btnSelect');
//循环播放函数主体
oNextBtn.onclick=function(){
num++;
if (num>imgCount.length-1) {
num=0;
}
commonFun();
}
oPrevBtn.onclick=function(){
num--;
if (num<0) {
num=imgCount.length-1;
}
commonFun();
}
}
//开启单向播放模式
oSingle.onclick=function(){
//添加按钮选中时按钮样式变化
if (oCircle.classList.contains('btnSelect')) {
oCircle.classList.remove('btnSelect');
}
oSingle.classList.add('btnSelect');
oNextBtn.onclick=function(){
num++;
if (num>imgCount.length-1) {
alert("~wow~已是最后一张,请向前播放");
num=imgCount.length-1;
}
commonFun();
}
//循环播放函数主体
oPrevBtn.onclick=function(){
num--;
if (num<0) {
alert("~wow~已是第一张,请向后播放");
num=0;
}
commonFun();
}
}
CSS部分：比较简单，图片的自适应显示用的flex
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.container{
position: relative;
margin: 0 auto;
width: 400px;
height: 400px;
font-size: 13px;
overflow: hidden;
background-color: #333;
display: -webkit-flex;
display: flex;
align-items: center;
}
.btnBox{
width: 400px;
height: 44px;
line-height: 44px;
margin: 25px auto;
background-color: #eee;
}
.btn {
float: left;
width: 49.9%;
height: 100%;
border: 0;
outline: 0;
background-color: #eee;
border-left: 1px solid rgba(0,0,0,0.15);
}
.btn:first-child{
border-left: 0;
}
.btnSelect{
background-color: #00bb9c;
color: #fff;
}
.singleSelect{
background-color: #00bb9c;
color: #fff;
}
.imgStyle{
max-width: 100%;
}
.prev,.next{
position: absolute;
top:180px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: rgba(0,0,0,0.6);
font-size: 18px;
font-family: cursive;
color: #fff;
}
.prev{
left:0;
}
.next{
right: 0;
}
.pageCount,.imgDes{
position: absolute;
left:0;
width: 100%;
height: 36px;
line-height: 36px;
text-align: center;
background-color: rgba(0,0,0,0.3);
color: #fff;
}
.pageCount{
top: 0;
}
.imgDes{
bottom: 0;
}
HTML部分：
<head>
<meta charset="utf-8">
<title>图片切换</title>
<style type="text/css"> </style>
</head>
<body> <div class="btnBox">
<button class="btn" id="circle">循环播放</button>
<button class="btn" id="single">单向播放</button>
</div> <div class="container"> <img src="" class="imgStyle" id="img">
<div class="pageCount" id="pageCount">正在加载页数...</div>
<a class="prev" id="prevBtn" href="javascript:void(0)"><</a>
<a class="next" id="nextBtn" href="javascript:void(0)">></a>
<div class="imgDes" id="imgDes">正在加载图片描述...</div> </div> </body>
Javascript:一款简易的图片切换插件的更多相关文章
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- zoeDylan.ImgChange 图片切换插件
墨芈深夜发布插件——图片切换 附上下载地址:http://pan.baidu.com/s/17kKF3共享天地/[墨芈 插件]zoeDylan Plugins Code JS (function ($ ...
- 介绍一款网站前台图片滚动插件之"switchable"
一.简单介绍:jQuery.Switchable是一款整合了Tabs.Slide.Scrollable等常见UI组件的jQuery插件,在这里,简答说说他的Slide.像Tabs,在Jquery-UI ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- jQuery实现多种切换效果的图片切换的五款插件
1:Nivo SliderNivoslider:丰富的图片切换效果 官方网址:https://themeisle.com/plugins/nivo-slider 查看演示:https://www.he ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
随机推荐
- [React Testing] JSX error diffs -- expect-jsx library
When writing React component tests, it can be hard to decipher the error diffs of broken tests, sinc ...
- 实战：推断mysql中当前用户的连接数-分组筛选
#connets.sh #!/bin/sh #ocpyang@126.com #依据输入參数u或d来显示出相应的username或数据库名中用户的连接数. #也能够输入u 详细username或d 详 ...
- 借助共享缓存redis实现分布式锁
新开发的系统须要控制每一个时刻回收缓存的GC线程有且仅仅有一个在执行,假设有多个线程同一时候执行,会造成系统崩溃.假设仅仅有一个JVM进程那么非常好办.简单的借助synchronizedkeyword ...
- 输入一个字符串，输出时数字倒序。例如：输入"hello2345wo7654",输出则为"hello5432wo4567"
public class ReserveString { public static void main(String[] args) { System.out.println("Pleas ...
- 代码段编辑器SnippetEditor 2.1
1.选择程序版本 2.可以创建文件夹 3.新建片段 4.给片段取名 5.双击进行编辑 6.点击保存 7.直接使用
- rhel6.4 using centos source
rhel 默认的 yum 依赖于 rhn,要注册收费才能 update,改用 centos 的源: rpm -e yum* --nodeps rpm -qa | grep yum | xargs rp ...
- OpenSuse如何共享目录
如何在SUSE Linux 建立共享文件夹 1./etc/samba/smb.conf 打开配置文档 2.在文档的最后加上共享的文档夹/opt,下面是示例. nte143:/etc/samba # v ...
- 附加数据库报错：无法打开物理文件 XXX.mdf",操作系统错误 5:"5(拒绝访问。)"
今天在附加数据库的时候出现如图报错信息: 无法打开物理文件 XXX.mdf",操作系统错误 5:"5(拒绝访问.)"错信息如图:(是不是远程服务器数据库附加出现只读那个情 ...
- Java实现生产者消费者问题与读者写者问题
摘要: Java实现生产者消费者问题与读者写者问题 1.生产者消费者问题 生产者消费者问题是研究多线程程序时绕不开的经典问题之一,它描述是有一块缓冲区作为仓库,生产者可以将产品放入仓库,消费者则可以从 ...
- Android 网络通信框架Volley的简单使用
Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健壮. Volley提供的功能: JSON,图像等的异步下载: 网络请求的排序(scheduling) 网络请求的优先级处理 ...