jquery鼠标滑动按钮图片切换滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标滑动按钮图片切换滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标滑动按钮图片切换</title>
</head>

<body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.v2_ilike{width:308px;border:#ccc solid 1px;height:243px;margin:0 auto;}
.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">
	<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="20140715081416894.jpg" /><br/>
				1新房套内61平求报价审核，急！新房套内61平求报价审核，急
			</div>
			<div class="v2_icontent_list">
				<img src="20140715081416894.jpg" /><br/>
				2新房套内61平求报价审核，急！新房套内61平求报价审核，急
			</div>
			<div class="v2_icontent_list">
				<img src="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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)