素材网 素材网

jquery实现图片左右切换滚动(鼠标悬停图片弹出详细简介)

下载资源()次

阅读次数()次

发布时间:2015-07-16

jquery实现图片左右切换滚动(鼠标悬停图片弹出详细简介)
分享到:

用法简介:

来源:xw素材网

jquery实现图片左右切换滚动(鼠标悬停图片弹出详细简介)。
文件引用:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var blw=$("#myscrollbox li").width();
//获取单个子元素所需宽度
var liArr = $("#myscrollbox ul").children("li");
//获取子元素数量
var mysw = $("#myscroll").width();
//获取子元素所在区域宽度
var mus = parseInt(mysw/blw);
//计算出需要显示的子元素的数量
var length = liArr.length-mus;
//计算子元素可移动次数(被隐藏的子元素数量)
var i=0
$("#right").click(function(){
  i++
  //点击i加1
  if(i<length){
	  $("#myscrollbox").css("left",-(blw*i));
	  //子元素集合向左移动,距离为子元素的宽度乘以i。
  }else{
	  i=length;
	  $("#myscrollbox").css("left",-(blw*length));
	  //超出可移动范围后点击不再移动。最后几个隐藏的元素显示时i数值固定位已经移走的子元素数量。
  }
});
$("#left").click(function(){
  i--
  //点击i减1
  if(i>=0){
	 $("#myscrollbox").css("left",-(blw*i));
	 //子元素集合向右移动,距离为子元素的宽度乘以i。
  }else{
	 i=0;
	 $("#myscrollbox").css("left",0);
	 //超出可移动范围后点击不再移动。最前几个子元素被显示时i为0。
  }
});
});
</script>


   

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。