<!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. SQL Server 动态生成数据库所有表Insert语句
			
    一. 背景 SQL Server,如果我们需要把数据库A的所有表数据到数据库B中,通常我们会怎么做呢?我会使用SSMS的导入导出功能,进行表数据的导入导出,无可厚非,这样的导入非常简单和方便: 但是, ...
    
			
    2. 
						
  2. ORACLE快速彻底Kill掉的会话
			
    在ORACLE数据库当中,有时候会使用ALTER SYSTEM KILL SESSION 'sid,serial#'杀掉一个会话进程,但是使用这个SQL语句杀掉会话后,数据库并不会立即释放掉相关的资源 ...
    
			
    3. 
						
  3. jQuery-template.js学习
			
    花了点时间,看了下jQuery-template.js,不多废话,先上结构 jQuery.each({..},function(){}) jQuery.fn.extend({..}) jQuery.e ...
    
			
    4. 
						
  4. 门面模式的典型应用 Socket 和 Http（post，get）、TCP/IP 协议的关系总结
			
    门面模式的一个典型应用:Socket 套接字(Socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息: 连接使用的 ...
    
			
    5. 
						
  5. RFC4035笔记
			
    章 节 标题 说明 补充说明 支持级别 1 介绍 1.定义DNSSEC协议修改点2.定义以下概念:已签名域(signed zone)和域签名的要求列表3.描述权威域名服务器为了处理签名域的行为变化4. ...
    
			
    6. 
						
  6. Java进击C#——应用开发之Linq和EF
			
    本章简言 上一章笔者对于WinForm开发过程用到的几个知识点做了讲解.笔者们可以以此为开端进行学习.而本章我们来讲一个跟ORM思想有关的知识点.在讲之前让我们想一下关于JAVA的hibernate知 ...
    
			
    7. 
						
  7. 从零开始学 Java - Spring 集成 ActiveMQ 配置（一）
			
    你家小区下面有没有快递柜 近两年来,我们收取快递的方式好像变了,变得我们其实并不需要见到快递小哥也能拿到自己的快递了.对,我说的就是类似快递柜.菜鸟驿站这类的代收点的出现,把我们原来快递小哥必须拿着快 ...
    
			
    8. 
						
  8. WinForm构造函数的作用
			
    最近练习C#项目:何问起收藏夹(HoverTreeSCJ),实现编辑网址时,遇到这个问题:比如打开窗口后,要自动显示数据.解决方法:那么可以通过窗体的构造函数传递参数. 比如窗体类: public p ...
    
			
    9. 
						
  9. Devexpress  Ribbon Add Logo
			
    一直在网上找类似的效果.在Devpexress控件里面的这个是一个Demo的.没法查看源代码.也不知道怎么写的.所以就在网上搜索了半天的. 终于找到类似的解决办法. 可以使用重绘制的办法的来解决. [ ...
    
			
    10. 
						
  10. C#开发微信门户及应用(11)--微信菜单的多种表现方式介绍
			
    在前面一系列文章中,我们可以看到微信自定义菜单的重要性,可以说微信公众号账号中,菜单是用户的第一印象,我们要规划好这些菜单的内容,布局等信息.根据微信菜单的定义,我们可以看到,一般菜单主要分为两种,一 ...
    
			
    11.