<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="main">
    <ul>
        <li class="current" sliderId = "1" ><img src="img/1.jpg" alt=""></li>
        <li  style="" sliderId = "2"><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" sliderId="3" alt=""></li>
    </ul>
    <span class="buttonSpan"><strong>3/</strong><small class="sliderPageIndex">1</small></span>
    <button class="rightSpan"> > </button>
    <button class='leftSpan'> < </button>
</div>
</body>
<style>

    *{margin:0;padding:0}

    .main {
        top:100px;
        left: 200px;
        height: 200px;
        width: 300px;
        overflow: hidden;
        position: relative;
    }

    .rightSpan {
        position: absolute;
        right: 0px;
        top:50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .buttonSpan{
        bottom: 2px;
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
    }

    .leftSpan {
        position: absolute;
        left: 0px;
        top:50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .main li {
        display:inline-block;
        display:-moz-inline-stack;
    }

</style>

<script>

     $($('.rightSpan')[0]).click(function(){
         var imgs = $(".main li");
         for(var index=0;index<imgs.length;index++){
             $(imgs[index]).css('display',"none");
             if(imgs[index].classList.contains('current')){
                 imgs[index].classList.remove('current');
                 if(index === imgs.length -1){
                     $(imgs[0]).css('display',"inline");
                     $(imgs[0]).addClass('current');
                     setPageIndex(1);
                 }else{
                     $(imgs[index+1]).css('display',"inline");
                     $(imgs[index+1]).addClass('current');
                     setPageIndex(index+2);
                 }
                 break;
             }
         }
     });

    $($('.leftSpan')[0]).click(function () {
        var imgs = $(".main li");
        for(var index=0;index<imgs.length;index++){
            $(imgs[index]).css('display',"none");
            if(imgs[index].classList.contains('current')){
                imgs[index].classList.remove('current');
                if(index === 0){
                    $(imgs[imgs.length-1]).css('display',"inline");
                    $(imgs[imgs.length-1]).addClass('current');
                    setPageIndex(imgs.length);
                }else{
                    $(imgs[index-1]).css('display',"inline");
                    $(imgs[index-1]).addClass('current');
                    setPageIndex(index);
                }
                break;
            }
        }
    });

    function setPageIndex(pageIndex) {
        $('.sliderPageIndex')[0].innerText = pageIndex;
    }

</script>

</html>


 


												


											
JS--实现简单轮播(一)的更多相关文章
	

    
						
  1. 原生js实现简单轮播的淡入淡出效果
		
    实现这种淡入淡出的轮播关键在于css的一种设置  首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起  达到这种效果  然后设置c3动画属性 transition:1s;  ...
    
		
    2. 
						
  2. 原生js写简单轮播图方式１－从左向右滑动
		
    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
    
		
    3. 
						
  3. 用jQuery基于原生js封装的轮播
		
    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
    
		
    4. 
						
  4. JS---案例：简单轮播图
		
    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
    
		
    5. 
						
  5. jQuery与原生js实现banner轮播图
		
    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta  ...
    
		
    6. 
						
  6. 原生JS实现简易轮播图
		
    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
    
		
    7. 
						
  7. 原生js实现无缝轮播
		
    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
    
		
    8. 
						
  8. 原生js实现图片轮播思路分析
		
    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
    
		
    9. 
						
  9. Bootstrap的js插件之轮播(carousel)
		
    轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...
    
		
    10. 
						
  10. JS+css3焦点轮播图PC端
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. ASP.NET免费服务器~支持MVC和Net4.5
			
    1.先注册一个号.地址:https://appharbor.com/ 2.看看有没有你需要的插件,基本上都是免费的 3.本地创建git库 4.复制git远程仓库的地址 5.推送到远程仓库 6.查看自己 ...
    
			
    2. 
						
  2. [C#] 走进异步编程的世界 - 剖析异步方法（上）
			
    走进异步编程的世界 - 剖析异步方法(上) 序 这是上篇<走进异步编程的世界 - 开始接触 async/await 异步编程>(入门)的第二章内容,主要是与大家共同深入探讨下异步方法. 本 ...
    
			
    3. 
						
  3. SQLServer：什么是主键（PK）和外键（FK）？
			
    一.主键与外键 1.主键是用来唯一地标识一行数据.主键列必须包含唯一的值,且不能包含空值(null). 2.主键可以建立在每张二维表中单列或者多列上. 3.一张二维表上的外键可以引用另一张二维表上对应 ...
    
			
    4. 
						
  4. YunCart电商网站支付宝接口出现500错误
			
    yuncart 是一套易与集成的php开源商城系统,方便多人同时经行二次开发,Yuncart 可以以非常方便的方式切换到sql server,oracle等数据库,大小1.9MB,感兴趣的朋友,可以去 ...
    
			
    5. 
						
  5. 实验：Oracle直接拷贝物理存储文件迁移
			
    实验目的:Oracle直接拷贝物理文件迁移,生产库有类似施工需求,故在实验环境简单验证一下. 实验环境: A主机:192.168.1.200 Solaris10 + Oracle 11.2.0.1 B ...
    
			
    6. 
						
  6. 分布式系统理论进阶 - Raft、Zab
			
    引言 <分布式系统理论进阶 - Paxos>介绍了一致性协议Paxos,今天我们来学习另外两个常见的一致性协议——Raft和Zab.通过与Paxos对比,了解Raft和Zab的核心思想.加 ...
    
			
    7. 
						
  7. 【分布式】Zookeeper使用--Java API
			
    一.前言 上一篇博客我们通过命令行来操作Zookeper的客户端和服务端并进行相应的操作,这篇主要介绍如何通过API(JAVA)来操作Zookeeper. 二.开发环境配置 首先打开Zookeeper ...
    
			
    8. 
						
  8. WebComponent魔法堂:深究Custom Element 之 标准构建
			
    前言  通过<WebComponent魔法堂:深究Custom Element 之 面向痛点编程>,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定 ...
    
			
    9. 
						
  9. C#——this关键字（1）
			
    //我的C#是跟着猛哥(刘铁猛)(算是我的正式老师)<C#语言入门详解>学习的,微信上猛哥也给我讲解了一些不懂得地方,对于我来说简直是一笔巨额财富,难得良师! 在学习C#的时候,老师讲的示 ...
    
			
    10. 
						
  10. MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件
			
    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...
    
			
    11.