JSFiddle - React, Tailwind, and code Playground

by jiang bourne

HTML

<div class="trans_box">
  <div id="transImageBox" class="trans_image_box">
    <div class="trans_image" style="width:300px;height:200px;background:blue;">111</div>
    <div class="trans_image" style="width:300px;height:200px;background:red;">222</div>
    <div class="trans_image" style="width:300px;height:200px;background:orange;">333</div>
  </div>
  <div id="transImageTrigger" class="trans_image_trigger">
    <a href="#1">图片1</a>　<a href="#2">图片2</a>　<a href="#3">图片3</a>
  </div>
</div>

CSS

.trans_box {
    width:300px;overflow:hidden;
}
.trans_image_box {
    width:20000px;
    height:200px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.trans_image_box .trans_image {
    float:left;width:200px;
}
.trans_image_trigger {
    padding-top: 10px;
    text-align: center;
}

JavaScript

var $ = function(id) {
return document.getElementById(id);
};
var $box = $("transImageBox"),
$oTrigger = $("transImageTrigger").getElementsByTagName("a"),
$len = $oTrigger.length;
for(var i = 0; i < $len; i++) {
$oTrigger[i].onclick = function(){
	var index = Number(this.href.replace(/.*#/g,'')) || 1;
	$box.style.marginLeft = (1 - index) * 300 + "px";
    return false;
};
	}