利用touchslider.js插件来制作的tab切换，可任意修改很方便~~~
样式：
<style>
.box-163css{ width:100%; position:relative; height:360px;margin-bottom:20px; float:left;}
/*swipe*/
.swipe{ padding-top:20px; width:100%; float:left;overflow: hidden; visibility: visible; position: relative; height:260px;}
.box01_list{position:relative; -webkit-transition: left 600ms ease-out; width:100%; left:;}
.li_list{width:100%;position:relative; float: left; vertical-align: top;}
/*pic_list*/
.pic_list{padding:0 2%;width:96%; float:left; margin-bottom:15px;}
.pic_list img{ float:left; width:120px;}
.pic_list span{ float:left; padding:10px 0 0 2%; font-size:16px; width:50%;}
/*news_list*/
.news_list{ width:98%; padding:0 1%; float:left;}
.news_list p{ width:100%; float:left; border-bottom:1px solid #ddd; height:30px; line-height:30px;}
.news_list a{ float:left; padding-left:1%; font-size:15px;}
.s_arrow{ display:block; border-top:2px solid #ccc;border-right:2px solid #ccc; -webkit-transform:rotate(45deg); width:6px; height:6px; float:right; margin:6px 10px 0 0;}
/*page*/
.page{ text-align:left; background:#f3f3f3; height:38px; line-height:38px; width:100%;
display:-webkit-box; display:-o-box;display:-moz-box; display:box;}
.page li{-webkit-box-flex:;-moz-box-flex:;-o-box-flex:;box-flex:; font-size:18px; display:block; color:#000; height:38px; line-height:38px; text-align:center; }
.page li a{ color:#000; display:block; height:38px;}
.page a.active{color:#f00;border-bottom:1px solid #c00;}
.go_btn{margin: 6px auto 12px auto;height: 34px;width: 92%;border: 1px solid #B9B9B9;text-align: center;line-height: 34px;font-size: 16px;
background: -webkit-gradient(linear,0 0,0 100%,from(whiteSmoke),to(#E3E3E3));background: -moz-linear-gradient(top,whiteSmoke,#E3E3E3);
-webkit-border-radius: 3px;border-radius: 3px; display:block; float:left; margin-left:2.5%;}
</style>
html部分：
<div class="box-163css">
<ul id="pagenavi1" class="page">
<li><a href="" class="active">新闻</a></li>
<li><a href="">产品</a></li>
<li><a href="">游戏</a></li>
<li><a href="">下载</a></li>
</ul>
<div id="slider1" class="swipe">
<ul class="box01_list">
<li class="li_list">
<div class="pic_list"><img src="img05.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
<div class="news_list">
<p><span class="s_arrow"></span><a href="#">曝湖人惊天交易:造跑轰三人组</a></p>
<p><span class="s_arrow"></span><a href="#">金志文圈钱:婚礼被曝卖700万</a></p>
<p><span class="s_arrow"></span><a href="#">[博]习总上任让日本非常恐慌</a></p>
<p><span class="s_arrow"></span><a href="#">10时播热火|书豪遭弃用</a></p>
</div>
</li>
<li class="li_list">
<div class="pic_list"><img src="img06.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
<div class="news_list">
<p><span class="s_arrow"></span><a href="#">日本耗1天半追千里缉捕台渔船</a></p>
<p><span class="s_arrow"></span><a href="#">安徽检察院办大案有功获1等功</a></p>
<p><span class="s_arrow"></span><a href="#">李庄提告重庆专案组徇私枉法</a></p>
<p><span class="s_arrow"></span><a href="#">外交部新任女发言人被赞漂亮</a></p>
</div>
</li>
<li class="li_list">
<div class="pic_list"><img src="img07.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
<div class="news_list">
<p><span class="s_arrow"></span><a href="#">警方:30韩国生在京抢劫系误会</a></p>
<p><span class="s_arrow"></span><a href="#">沪68岁父亲杀39岁"啃老"独子</a></p>
<p><span class="s_arrow"></span><a href="#">三亚免税店自曝大部分是假货</a></p>
<p><span class="s_arrow"></span><a href="#">组图:跟拍情侣间的"私密"生活</a></p>
</div>
</li>
<li class="li_list">
<div class="pic_list"><img src="img08.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
<div class="news_list">
<p><span class="s_arrow"></span><a href="#">评:日"泥鳅"首相变酗酒老宅男</a></p>
<p><span class="s_arrow"></span><a href="#">围观:72岁翁穿女装网店当模特</a></p>
<p><span class="s_arrow"></span><a href="#">[博]习总上任让日本非常恐慌</a></p>
<p><span class="s_arrow"></span><a href="#">外交部新任女发言人被赞漂亮</a></p>
</div>
</li>
</ul> </div> </div>
js部分：
for(n=1;n < 3;n++){
var page='pagenavi'+n;
var mslide='slider'+n;
var mtitle='emtitle'+n;
arrdiv = 'arrdiv' + n;
var as=document.getElementById(page).getElementsByTagName('a');
var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
var as=document.getElementById(this.page).getElementsByTagName('a');
as[this.p].className='';
as[index].className='active';
this.p=index;
var txt=as[index].innerText;
$("#"+this.page).parent().find('.emtitle').text(txt);
var txturl=as[index].getAttribute('href');
var turl=txturl.split('#');
$("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);
}});
tt.page = page;
tt.p = 0;
//console.dir(tt); console.dir(tt.__proto__);
for(var i=0;i < as.length;i++){
(function(){
var j=i;
as[j].tt = tt;
as[j].onclick=function(){
this.tt.slide(j);
return false;
}
})();
}
}
别忘记了要添加touchslider.js插件哦~~ 效果图：
不明白的小伙伴可以自行去下载哦~~~~~
链接: http://pan.baidu.com/s/1eSNWovg 密码: 4s7p