自己动手写图片切换代码(jquery)

<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)能运行的。


你可能感兴趣的:(自己动手写图片切换代码(jquery))