<!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. 为WLW开发Latex公式插件
			
    WLW是写博客的利器,支持离线.格式排版等,而且拥有众多的插件.博客园推荐了代码插入插件,但是没有提供WLW的公式编译插件.目前我的一般做法是:先在Word下使用MathType编辑好公式,然后将公式 ...
    
			
    2. 
						
  2. ASP.NET MVC5+EF6+EasyUI 后台管理系统-分配角色给用户
			
    系列目录 由于之前做了将权限赋给角色,还需要做将角色组赋给用户,和将用户赋给角色组,一个用户可以拥有多个角色组,一个角色组包含多个用户,打开模块管理,添加一个分配的操作码 并在 角色权限设置授权给他  ...
    
			
    3. 
						
  3. Android开发之基于AndroidStudio环境搭建和工程创建
			
    断断续续的学习安卓也有一段时间了.因为之前是搞iOS开发的, 之前有关iOS的博客请看<我的iOS开发系列博文>.<我的Objective-C系列文章>和<窥探Swift ...
    
			
    4. 
						
  4. python2.7 内置ConfigParser支持Unicode读写
			
    1 python编码基础 对应 C/C++ 的 char 和 wchar_t, Python 也有两种字符串类型,str 与 unicode: str与unicode # -*- coding: ut ...
    
			
    5. 
						
  5. NPOI导出Excel
			
    using System;using System.Collections.Generic;using System.Linq;using System.Text;#region NPOIusing  ...
    
			
    6. 
						
  6. 简单实用的进度条加载组件loader.js
			
    本文提供一个简单的方法实现一个流程的进度条加载效果,以便在页面中可以通过它来更好地反馈耗时任务的完成进度.要实现这个功能,首先要考虑怎样实现一个静态的进度条效果,类似下面这样的: 这个倒是比较简单,两 ...
    
			
    7. 
						
  7. react-native 简单的导航
			
    默默潜水了两年了,一直都在看大神们写的博客,现在我也分享一下跟RN导航有关的东西. 前两年我主要是做iOS开发的,现在刚找了份工作,应公司要求,现在开始学习reactnative的东西,由于我以前没怎 ...
    
			
    8. 
						
  8. 【转】async & await 的前世今生
			
    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...
    
			
    9. 
						
  9. Node.js写文件的三种方法
			
    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...
    
			
    10. 
						
  10. 浅谈Hybrid技术的设计与实现第二弹
			
    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
    
			
    11.