自己动手写图片切换代码（jquery）

最新推荐文章于 2022-11-10 08:56:30 发布

tomyjohn

最新推荐文章于 2022-11-10 08:56:30 发布

阅读量693

点赞数

分类专栏： DIV+CSS JS技巧

本文链接：https://blog.csdn.net/tomyjohn/article/details/37938199

版权

JS技巧同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

DIV+CSS

4 篇文章 0 订阅

订阅专栏

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