<!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. c#操作MangoDB 之MangoDB CSharp Driver驱动详解
			
    序言 MangoDB CSharp Driver是c#操作mongodb的官方驱动. 官方Api文档:http://api.mongodb.org/csharp/2.2/html/R_Project_ ...
    
			
    2. 
						
  2. WCF之安全性
			
    WCF 客户端代理生成 通过SvcUtil.exe http://www.cnblogs.com/woxpp/p/6232298.html WCF 安全性 之 None http://www.cnbl ...
    
			
    3. 
						
  3. H5实现本地预览图片
			
    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
    
			
    4. 
						
  4. C＃7.0中有哪些新特性？
			
    以下将是 C# 7.0 中所有计划的语言特性的描述.随着 Visual Studio “15” Preview 4 版本的发布,这些特性中的大部分将活跃起来.现在是时候来展示这些特性,你也告诉借此告诉 ...
    
			
    5. 
						
  5. 定向爬虫 - Python模拟新浪微博登录
			
    当我们试图从新浪微博抓取数据时,我们会发现网页上提示未登录,无法查看其他用户的信息. 模拟登录是定向爬虫制作中一个必须克服的问题,只有这样才能爬取到更多的内容. 实现微博登录的方法有很多,一般我们在模 ...
    
			
    6. 
						
  6. Node学习笔记（一）：stream流操作
			
    NodeJs中谈及较多的可能就是Stream模块了,先写一个简单的ajax回调 $.post("index.php",{data:'aaa',order:'ccc'},functi ...
    
			
    7. 
						
  7. 包含修改字体，图片上传等功能的文本输入框-Bootstrap
			
    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...
    
			
    8. 
						
  8. pwm 占空比 频率可调的脉冲发生器
			
    module xuanpin #(parameter N=25)(clk,clr,key_in_f,key_in_z,f_out);input clk,clr,key_in_f,key_in_z;ou ...
    
			
    9. 
						
  9. 1、Python基本概念
			
    1.数 python中有4种类型的数--整数.长整数.浮点数和复数 2.字符串 单引号.双引号或者三引号包含的字符序列,如: 'char' #单引号 "char" #双引号 ''' ...
    
			
    10. 
						
  10. Scala Macros － scalamela 1.x，inline-meta annotations
			
    在上期讨论中我们介绍了Scala Macros,它可以说是工具库编程人员不可或缺的编程手段,可以实现编译器在编译源代码时对源代码进行的修改.扩展和替换,如此可以对用户屏蔽工具库复杂的内部细节,使他们可 ...
    
			
    11.