JSFiddle - React, Tailwind, and code Playground

by tu genhua

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;
};
	}