JSFiddle - React, Tailwind, and code Playground

by xianjian

HTML

<div class="m_slider" id="slider1">
        <ul class="list">
        		<li style="background-color:#ccc">1</li>
                <li style="background-color:#aaa">2</li>
                <li style="background-color:#888">3</li>
        </ul>
        <div class="btn_group" onselectstart="return false;">
               <span class="previous">&lt;</span>
               <span class="btn">&#x25cf;</span>
               <span class="btn">&#x25cf;</span>
               <span class="btn">&#x25cf;</span>
               <span class="next">&gt;</span>
        </div>
    </div>
        
  	<div class="m_slider" id="slider2">
        <ul class="list">
        		<li style="background-color:#2E89EF">1</li>
             <li style="background-color:#00A300">2</li>
             <li style="background-color:#DA532C">3</li>
             <li style="background-color:#2B3A41">4</li>
        </ul>
        <div class="btn_group" onselectstart="return false;">
               <span class="previous">&lt;</span>
               <span class="btn">&#x25cf;</span>
               <span class="btn">&#x25cf;</span>
               <span class="btn">&#x25cf;</span>
               <span class="btn">&#x25cf;</span>
               <span class="next">&gt;</span>
        </div>
    </div>
    
      	<div class="m_slider" id="slider3">
        <ul class="list">
        		<li style="background-color:#2E89EF">1</li>
             <li style="background-color:#00A300">2</li>
             <li style="background-color:#DA532C">3</li>
        </ul>
        <div class="btn_group" onselectstart="return false;">
               <span class="previous">&lt;</span>
               <span class="btn">&#x25cf;</span>
               <span class="btn">&#x25cf;</span>
               <span class="btn">&#x25cf;</span>
               <span class="next">&gt;</span>
        </div>
    </div>
    
          	<div class="m_slider" id="slider4">
        <ul class="list">
        		<li style="background-color:#2E89EF">1</li>
       ...

CSS

#slider2,#slider3{width:300px;border:1px solid #ccc}
/* slider start */
.m_slider ul,li{margin:0; padding:0; list-style:none}
.m_slider .list{height:200px;position:relative;overflow:hidden}
.m_slider .list li{width:100%;height:100%;position:absolute;display:none}
/*button*/
.m_slider .btn_group{text-align:center;margin:10px;}
.m_slider .btn_group span{cursor:pointer;margin-right:10px;font: 14px SimSun}
.m_slider .btn_group .btn{color:#ccc}
.m_slider .btn_group .current{color:#444}
.m_slider .btn_group .previous,
.m_slider .btn_group .next{border:1px solid #888;padding:4px 10px}
.m_slider .btn_group .previous:active,
.m_slider .btn_group .next:active{background:#eee;cursor:pointer}
/* slider end */

JavaScript

(function($){
 var sets = {
   speed:1000,
   interval:2000
 };
 
 function getCurrent(cur,max){
   return cur < max ? cur : 0;
 }
 
 function getNext(cur,max){
   return cur+1 >= max ? 0 : cur+1;
 }
 
 function getLeftNext(cur,max){
   return cur-1 < 0 ? max-1 : cur-1;
 }
 
 
 $.fn.extend({
 slider:function(options){
   var $points = $(this).find('.btn'),
	   $list = $(this).find('.list li'),
	   $previousBtn = $(this).find('.previous'),
	   $nextBtn = $(this).find('.next'),
	   size = $list.length,
	   width = $(this).width(),
	   opts = $.extend({},sets,options||{}),
	   current,next,animate = false,timer,
	   run = function(){
	      timer = setInterval(function(){
             doAnimate(true);
	     },opts.interval);
	  };
	if(size ==1) {
     showFirst(0);
     return;
  }
  
  //给slider添加鼠标以上去停止动画,鼠标移出开始动画
	$(this).hover(function(){clearInterval(timer);}, run);
  
  //previous按钮
	$previousBtn.click(function(){
	   if(! animate)doAnimate(false);
	  }
	);
  //next按钮
	$nextBtn.click(function(){
       if(! animate)doAnimate(true);
	  }
	);
  
  //圆点点击事件
	$points.click(function(){
	  var index = $(this).index()-1;
	   showFirst(index);
	});
	
	showFirst(0);
   run();
	
	function doAnimate(direct){		
    animate = true;
	  current = getCurrent(current,size);
	  next = direct?getNext(current,size):getLeftNext(current,size);
	 var  $current = $list.eq(current);
	 var  $next = $list.eq(next);
	  markPoint(next);
	  $current.css({left:'0px',display:'block'});
	  var w1 = direct? width+'px' : -width+'px';
	  $next.css({left:w1,display:'block'});
	  var w2 = direct? -width+'px' : width+'px';
	  $current.animate({left:w2},{easing:'swing',duration:opts.speed,complete:function(){
         $current.css('display','none');
         animate =false;
         current = direct ?  current+1 :  next ;
      }});
	 $next.animate({left:'0px'},{easing:'swing',duration:opts.speed});
	}
	
  //显示第一张
	function showFirst(index){
	   current = getCurrent(index,size);
	  ...