html {
_background-image: url(about:blank); /*用浏览器空白页面作为背景*/
_background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
}
body{
margin:0;
font-family:'宋体',arial,sans-serif;
font-size:12px;
/*background:url(../../image/index/e-bod-bg.jpg) 0 199px repeat-x;*/
}
h1,h2,h3,h4,h5,dl,dd,p,form,select{
margin:0;
}
ul,ol,input{
margin:0;
padding:0;
list-style-type:none;
}
em,var,i{
font-style:normal;
}
a{
text-decoration:none;
}
a img{
border:0 none;
}
.e-teacher-box{
height:293px;
border:1px #E0E0E0 solid;
overflow:hidden;
}
.e-teacher-l{
width:25px;
float:left;
padding:100px 0 0 18px;
overflow:hidden;
}
.e-teacher-l a{
display:inline-block;
height:23px;
width:17px;
background:url(http://www.eswine.com/esnews/Common/image/index/e-click-l.jpg) 0 0 no-repeat;
}
.e-teacher-l a:hover{
background:url(http://www.eswine.com/esnews/Common/image/index/e-click-l-hover.jpg) 0 0 no-repeat;
}
.e-teacher-m{
width:642px;
height:266px;
padding-top:15px;
float:left;
overflow:hidden;
}
.e-teacher-r{
float:left;
width:32px;
padding:100px 0 0 8px;
overflow:hidden;
}
.e-teacher-r a{
display:inline-block;
height:23px;
width:17px;
background:url(http://www.eswine.com/esnews/Common/image/index/e-click-r.jpg) 0 0 no-repeat;
cursor:pointer;
}
.e-teacher-r a:hover{
background:url(http://www.eswine.com/esnews/Common/image/index/e-click-r-hover.jpg) 0 0 no-repeat;
}
.e-teacher-list{
width:5000px;
height:260px;
overflow:hidden;
}
.e-teacher-list li{
width:150px;
float:left;
margin-right:14px;
overflow:hidden;
}
.e-teacher-list-img{
height:216px;
background:url(http://www.eswine.com/esnews/Common/image/index/e-bg6.jpg) 0 bottom no-repeat;
overflow:hidden;
}
.e-teacher-list-img img{
width:140px;
height:202px;
padding:4px;
border:1px #E2E2E2 solid;
border-bottom:none;
}
.e-teacher-list-tit span{
display:block;
height:22px;
line-height:22px;
text-align:center;
overflow:hidden;
}
.e-teacher-list-tit span a{
color:#333;
}
.e-teacher-list-tit span a:hover{
text-decoration:underline;
}
.e-teacher-list-tit span .e-red{
color:#9A003C;
}
<div class="e-teacher-box">
<div class="e-teacher-l"> <a href="javascript:;;" id="e-left2"></a> </div>
<div class="e-teacher-m">
<ul class="e-teacher-list" id="e-con2">
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d151b43fe47.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">田晓明</a></span> <span><a href="javascript:" class="e-red">以葡萄酒演绎人生</a></span> </div>
</li>
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50188f84e4a48.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">曲乐</a></span> <span><a href="javascript:" class="e-red">我的侍酒师之路</a></span> </div>
</li>
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b14446631.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">黄为民</a></span> <span><a href="javascript:" class="e-red">我的无愧之选</a></span> </div>
</li>
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b22e4f020.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">姜山</a></span> <span><a href="javascript:" class="e-red">踏上新的葡萄酒旅程</a></span> </div>
</li>
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d80e6d6bd9d.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">王密</a></span> <span><a href="javascript:" class="e-red">爱上葡萄酒</a></span> </div>
</li>
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b336440e1.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">胡若冰</a></span> <span><a href="javascript:" class="e-red">在工作中传播葡萄酒文化</a></span> </div>
</li>
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b2fe4d96b.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">唐亚琼</a></span> <span><a href="javascript:" class="e-red">在葡萄酒领域找寻自己的方</a></span> </div>
</li>
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b3708e559.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">张子英</a></span> <span><a href="javascript:" class="e-red">愿为葡萄酒事业贡献力量</a></span> </div>
</li>
<li>
<div class="e-teacher-list-img"> <a href="javascript:"><img src="http://www.eswine.com/images/50d7b40274775.jpg"></a> </div>
<div class="e-teacher-list-tit"> <span><a href="javascript:">刘恩泽</a></span> <span><a href="javascript:" class="e-red">圆梦侍酒师</a></span> </div>
</li>
</ul>
</div>
<div class="e-teacher-r"> <a href="javascript:;;" id="e-rig2"></a> </div>
</div>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script>
/*
* 功能：多张图片左右点击按钮进行滚动，数据不足的时候不出现最后空白
* 版本：基本功能插件
*/
;(function($){
$.fn.extend({"imgScroll":function(options){
var elment = this;
var defaults = {
width:164,
visible:4,
ltriggers:'#e-left',
rtriggers:'#e-right',
classname:'espan'
};
var options = $.extend(defaults,options);
var i = elment.children('li').length;
var ii = elment.children('li').length;
elment.width(i * options.width);
$(options.rtriggers).click(function() {
var marginL = elment.css("margin-left") == "auto" ? 0 : parseInt(elment.css("margin-left"));
if (i > options.visible) {
if (i - options.visible >= (options.visible-1)) {
if (!elment.is(":animated")) {
elment.animate({
marginLeft: marginL - options.width * (options.visible-1) + "px"
}, "slow", function() {
i -= (options.visible-1);
})
}
} else {
if (!elment.is(":animated")) {
elment.animate({
marginLeft: marginL - options.width * (i - options.visible) + "px"
}, "slow", function() {
i = options.visible;
})
}
}
}
});
$(options.ltriggers).click(function() {
var marginL = elment.css("margin-left") == "auto" ? 0 : parseInt(elment.css("margin-left"));
if (i < ii) {
if (i < ii - (options.visible -1)) {
if (!elment.is(":animated")) {
elment.animate({
marginLeft: marginL + options.width * (options.visible -1) + "px"
}, "slow", function() {
i += (options.visible -1);
})
}
} else {
if (!elment.is(":animated")) {
elment.animate({
marginLeft: marginL + options.width * (ii - i) + "px"
}, "slow", function() {
i = ii;
})
}
}
}
})
}
});
})(jQuery);
$(function(){
$("#e-con2").imgScroll({
width:164,
ltriggers :"#e-left2",
rtriggers :"#e-rig2",
visible:4
});
});
</script>
