最近迷上javascript,每天不写点什么都不舒服哈~

尽管自己能力有限,还是尽自己所能写点东西出来。

实现效果:

效果预览:http://codepen.io/anon/pen/BNjxXj

该插件分为两种模式:循环播放模式,以及,单向播放模式

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:一款简易的图片切换插件的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  3. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  5. zoeDylan.ImgChange 图片切换插件

    墨芈深夜发布插件——图片切换 附上下载地址:http://pan.baidu.com/s/17kKF3共享天地/[墨芈 插件]zoeDylan Plugins Code JS (function ($ ...

  6. 介绍一款网站前台图片滚动插件之"switchable"

    一.简单介绍:jQuery.Switchable是一款整合了Tabs.Slide.Scrollable等常见UI组件的jQuery插件,在这里,简答说说他的Slide.像Tabs,在Jquery-UI ...

  7. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  8. jQuery实现多种切换效果的图片切换的五款插件

    1:Nivo SliderNivoslider:丰富的图片切换效果 官方网址:https://themeisle.com/plugins/nivo-slider 查看演示:https://www.he ...

  9. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

随机推荐

  1. C语言 对数组名取地址

    作者 : 卿笃军 你有没有想过,对一个一维数组名取地址,然后用这个地址进行加减运算.这会出现什么样的结果呢? 演示样例: int a[5] = {1,2,3,4,5}; int *p = (int * ...

  2. 深入浅出 RPC - 深入篇

    <深入篇>我们主要围绕 RPC 的功能目标和实现考量去展开,一个基本的 RPC 框架应该提供什么功能,满足什么要求以及如何去实现它? RPC 功能目标 RPC 的主要功能目标是让构建分布式 ...

  3. GitHub 小试

    GitHub是什么? 它是用来进行版本控制的,就是用来保存项目的地方. 但是项目要是运行,还是需要你本地的环境,它只不过是用来保存代码罢了. GitHub如何操作? 可以通过客户端进行代码提交,更新. ...

  4. jquery之onchange事件2

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. 查看 SELinux状态及关闭SELinux

    查看SELinux状态: 1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 SELinux status:         ...

  6. 后台的Activity被系统回收怎么办?

    onSaveIntanceState,当程序中的某个Activity A在运行中,主动或者被动的运行另外一个新的Activity B,这个时候 A就会执行onSaveIntanceState(Bund ...

  7. php连接mysql的一些方法总结

    为了能让PHP连接MSSQL,系统需要安装MSSQL,PHP,且在PHP.ini中的配置中,将       ;extension=php_mssql.dll前面的;去掉 1.连接MSSQL       ...

  8. 数据库元数据分析Demo

    核心类:DatabaseMetaData.ResultSetMetaData 1 System.err.println("********************************** ...

  9. (原)torch的apply函数

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6221633.html torch中的apply函数通过可以不断遍历model的各个模块.实际上其使用的 ...

  10. uva 498 - Polly the Polynomial

    UVa 498: Polly the Polynomial | MathBlog #include <cstdio> #include <cstdlib> using name ...