<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style type="text/css">
.tgd{float:left;margin-top:10px;}
.v2_ilike{width:308px; border:#ccc solid 1px;height:243px;}
.v2_ititle{height:39px; margin:5px 5px; width:298px; line-height:40px; border-bottom:#ccc solid 1px;}
.v2_ihz{float:left;font-size:14px; font-weight:bold;margin-left:10px;}
.v2_ibox{float:right;width:60px; height:40px;}
.v2_ibox a{margin-top:25px;}
.v2_ibox a.v2_ib_btn{float:left;display:block;width: 17px;height: 5px;background: #818181;margin-left: 3px;}
.v2_ibox a.on{background: #00AD29;}
.v2_icontent_boxs{width:298px;margin:0px 5px;height:193px;overflow: hidden;position: relative;}
.v2_icontent_box{position:absolute;width:2000px;}
.v2_icontent_list{width:298px; float:left;height:193px; text-align:center; line-height:25px;font-size:13px;}
.v2_icontent_list img{width:298px; height:143px;}
</style>
<div class="v2_ilike tgd">
<div class="v2_ititle">
<div class="v2_ihz">我想团</div>
<div class="v2_ibox">
<a href="javascript:;" class="v2_ib_btn on"></a>
<a href="javascript:;" class="v2_ib_btn"></a>
<a href="javascript:;" class="v2_ib_btn"></a>
</div>
</div>
<div class="v2_icontent_boxs">
<div class="v2_icontent_box">
<div class="v2_icontent_list">
<img src="http://www.jiato.cn/uploadfile/2014/0715/20140715081416894.jpg" /><br/>
1新房套内61平求报价审核,急!新房套内61平求报价审核,急
</div>
<div class="v2_icontent_list">
<img src="http://www.jiato.cn/uploadfile/2014/0715/20140715081416894.jpg" /><br/>
2新房套内61平求报价审核,急!新房套内61平求报价审核,急
</div>
<div class="v2_icontent_list">
<img src="http://www.jiato.cn/uploadfile/2014/0715/20140715081416894.jpg" /><br/>
3新房套内61平求报价审核,急!新房套内61平求报价审核,急
</div>
</div>
</div>
</div>
<script type="text/javascript">
var icurrent =0;//当前元素
var max = 3;//元素最多个数
var divwidth = 298;//图文宽度
function change(obj){
$('.v2_ibox a').removeClass('on');
$(obj).addClass('on');
var index = $('.v2_ibox').find('.on').index();
icurrent = index;
$(".v2_icontent_box").animate({left:'-'+icurrent*divwidth+'px'});
}
$('.v2_ibox .v2_ib_btn').mouseover(function(){
change(this);
});
window.setInterval(function changeauto(){
if(icurrent==max){
icurrent = 0;
}
$('.v2_ibox a').removeClass('on');
$('.v2_ibox a').eq(icurrent).addClass('on');
$(".v2_icontent_box").animate({left:'-'+icurrent*divwidth+'px'});
icurrent++;
} , 2000);
</script>
今天在写一个网站的时候,客户需求一个仿别人的图片切换,我想直接COPY过来,但是看了他的代码后,我觉得还是自己写好一些,主要是看不懂别人写的东东。
代码
直接把代码保存在本地(HTML)能运行的。