<!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. HTML5移动开发学习笔记之CSS3基础学习
			
    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
    
			
    2. 
						
  2. ★Kali信息收集~★7.FPing ：ip段扫描
			
    参数: 使用方法: fping [选项] [目标...] -a显示是活着的目标 -A 显示目标地址 -b n 大量 ping 数据要发送,以字节为单位 (默认 56) -B f 将指数退避算法因子设置 ...
    
			
    3. 
						
  3. SQL Server 游标运用：鼠标轨迹字符串分割
			
    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 游标模板(Cursor Template) 鼠标轨迹字符串分割SQL脚本实现(SQL Code ...
    
			
    4. 
						
  4. 锋利的jQuery--Ajax(读书笔记四)
			
    1.表单值得序列化 <1>serialize() 例子: html: <form action=""> First name: <input type ...
    
			
    5. 
						
  5. xdebug断点调试原理
			
    通过Xdebug进行远程调试时,PHPSTORM等IDE会监听Xdebug设置的调试ip和端口(php.ini中配置) [xdebug] ; Xdebug zend_extension=php_xde ...
    
			
    6. 
						
  6. SQLServer：什么是主键（PK）和外键（FK）？
			
    一.主键与外键 1.主键是用来唯一地标识一行数据.主键列必须包含唯一的值,且不能包含空值(null). 2.主键可以建立在每张二维表中单列或者多列上. 3.一张二维表上的外键可以引用另一张二维表上对应 ...
    
			
    7. 
						
  7. MySQL binlog中的事件类型
			
    MySQL binlog记录的所有操作实际上都有对应的事件类型的,譬如STATEMENT格式中的DML操作对应的是QUERY_EVENT类型,ROW格式下的DML操作对应的是ROWS_EVENT类型. ...
    
			
    8. 
						
  8. sql重置自增长
			
    SQL的自增列挺好用,只是开发过程中一旦删除数据,标识列就不连续了 写起来 也很郁闷,所以查阅了一下标识列重置的方法 发现可以分为三种: --- 删除原表数据,并重置自增列 truncate tabl ...
    
			
    9. 
						
  9. quartz定时+log4net日志+exchangeservice发邮件
			
    main using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...
    
			
    10. 
						
  10. Vue.js 入门指南之“前传”（含sublime text 3 配置）
			
    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
    
			
    11.