jquery 图片左右切换，一长条的显示，点击左右移动。

菜鸟啊，想了一天才写出来，唉。

ps: 生活无乐趣，代码更加无乐趣！

.hdjs{display:inline-block; width:100%; margin-top:4px; position: relative; height:101px; background: url("../images/2_05.png") repeat-x;}
.hdjs_div{ width: 912px; height:101px; position: relative; margin:0 auto; overflow: hidden;}
.hdjs_div .ful{ width: 100%; position: absolute; left: 0; top: 0; height:101px;}
.hdjs_div .ful li{ width: 222px; height: 101px; float:left; background: url("../images/2_03.png") no-repeat; margin:0 3px;}
.hdjs_div .ful li a{ width: 222px; height: 101px; display: block;}
.hdjs_div .ful .spag{ float: left; margin-left:10px; margin-top:25px;}
.hdjs_div .ful .divgr{ float: left; width: 130px; text-align: left; margin-left:10px;margin-top:25px;}
.hdjs_div .ful .divgr p{ width: 100%; float: left;}
.hdjs_div .ful .divgr .pa{font-family:"Arial";color:#f0275e; font-size: 10px; font-weight: bold;}
.hdjs_div .ful .divgr .pb{color:#f0275e; font-size: 12px;}
.hdjs_div .ful .divgr .pc{color:#9f9f9f; font-size: 12px;}
.hdjs .next{ position: absolute; right: -10px; top: 27px; width: 43px; height: 49px;  background: url("../images/pic.png") -40px -316px no-repeat;}
.hdjs .nexta{position: absolute; right: -10px; top: 27px; width: 43px; height: 49px;  background: url("../images/pic.png") -123px -316px no-repeat;}
.hdjs .prev{ position: absolute; left: -10px; top: 27px; width: 43px; height: 49px;  background: url("../images/pic.png") -0px -316px no-repeat;}
.hdjs .preva{ position: absolute; left: -10px; top: 27px; width: 43px; height: 49px;  background: url("../images/pic.png") -83px -316px no-repeat;}

  // Author：sikeyvar hdlengt=$(".ful li").length;//获取个数var hdwidth=$(".ful li").width()+6;//获取宽度var hd=hdlengt*hdwidth;//宽度乘以个数var wwidth=(hdlengt-4)*hdwidth;//个数减去显示的4个在乘以宽度$(".ful").width(hd)//获取的宽度赋值给要显示的宽度var hdjs=$(".hdjs_div ul");//变量if(hdjs.scrollLeft()==0){ //如果边距为0$(".next").remove();//本身删除$(".hdjs_div").parent().append("<a href='javascript:;' class='nexta'></a>")//添加一个标签}function tpgd(id){//函数名，左边移动动画，（其中id为值，从外面传进来，这里用来接收）hdjs.animate({'left':-228*id //需要移动多少像素在乘以id的值})}$(".next").live("click",function(){ //点击事件id-- //每次点击id减值if(id==0){ // id如果等于0$(this).remove(); // 本身删除$(".hdjs_div").parent().append("<a href='javascript:;' class='nexta'></a>")//添加一个标签}$(".preva").addClass("prev");//添加一个为prev的样式$(".prev").removeClass("preva");//删除样式ii-- //每次点击ii减值tpgd(id) //执行这个函数,(把id的值传给函数)})var id //命名一个变量var ii=$(".ful li").index(); //ii变量var ii=1  //ii为1$(".prev").live("click",function(){ //点击事件id=ii++  //id每次点击加一if(hdwidth*id==wwidth){ //判断语句，如果宽度乘以点击的个数的值等于wwidth$(this).remove(); //删除本身$(".hdjs_div").parent().append("<a href='javascript:;' class='preva'></a>") //添加标签//return false}$(".nexta").addClass("next"); //添加样式$(".next").removeClass("nexta"); //删除样式tpgd(id)  //执行这个函数,(把id的值传给函数)})

<div class="hdjs"><div class="hdjs_div"><ul class="ful"><li><a href="#"><span class="spag"><img src="data:images/index1_15.png" width="65" height="48" /></span><div class="divgr"><p class="pa">2009-08-24</p><p class="pb">CROWN全场3～7折</p><p class="pc">活动内容：crown全场38～498元</p></div></a></li><li><a href="#"><span class="spag"><img src="data:images/index1_15.png" width="65" height="48" /></span><div class="divgr"><p class="pa">2009-08-24</p><p class="pb">CROWN全场3～7折</p><p class="pc">活动内容：crown全场38～498元</p></div></a></li><li><a href="#"><span class="spag"><img src="data:images/index1_15.png" width="65" height="48" /></span><div class="divgr"><p class="pa">2009-08-24</p><p class="pb">CROWN全场3～7折</p><p class="pc">活动内容：crown全场38～498元</p></div></a></li><li><a href="#"><span class="spag"><img src="data:images/index1_15.png" width="65" height="48" /></span><div class="divgr"><p class="pa">2009-08-24</p><p class="pb">CROWN全场3～7折</p><p class="pc">活动内容：crown全场38～498元</p></div></a></li><li><a href="#"><span class="spag"><img src="data:images/index1_15.png" width="65" height="48" /></span><div class="divgr"><p class="pa">2009-08-24</p><p class="pb">CROWN全场3～7折</p><p class="pc">活动内容：crown全场38～498元</p></div></a></li><li><a href="#"><span class="spag"><img src="data:images/index1_15.png" width="65" height="48" /></span><div class="divgr"><p class="pa">2009-08-24</p><p class="pb">CROWN全场3～7折</p><p class="pc">活动内容：crown全场38～498元</p></div></a></li><li><a href="#"><span class="spag"><img src="data:images/index1_15.png" width="65" height="48" /></span><div class="divgr"><p class="pa">2009-08-24</p><p class="pb">CROWN全场3～7折</p><p class="pc">活动内容：crown全场38～498元</p></div></a></li></ul></div><a href="javascript:;" class="next"></a><a href="javascript:;" class="prev"></a></div>

jquery 图片左右切换，一长条的显示，点击左右移动。相关推荐

jquery图片播放切换插件
点击这里查看效果可自定义数字样式和左右点击按钮这个更好: 移入按钮切换版本更多图片轮播以下是HTML文件代码: 1 <!DOCTYPE html PUBLIC "-//W3C/ ...
jquery 图片无缝切换
想要和园友分享一下学习jquery的经验.总结,更希望园友提出点建议. 第一次写,有不好的地方请多多见谅! 文笔有限,很多时候不知道怎么来描述,唉.硬伤啊!!那只好多做了,贴代码... ok,废话少说 ...
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受We ...
Jquery 图片浏览插件
原文来源:http://www.techolics.com 在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最 ...
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
<40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一> <40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三> <40个有创意的jQuery图片和内容 ...
简洁风个人主页（3） js背景图片随机切换
静态页面做完了,现在用js做一个背景图片随机切换的效果. 1.点击'个人网站'这个字样,实现body背景的切换.所以,首先获取这两个节点. var body = document.body; var ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
JQuery实现移动9宫格图片自由切换移动
这篇文章主要介绍了通过JQuery实现移动9宫格的前端页面特效,用户可以自由选择1张图片,并移动此图片,松开鼠标后,会自动交换2张图片的位置. 实现方法:html和css在页面上静态地实现9宫格,用9 ...
jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换
jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换 1.可左右切换 2.可点击缩略图显示大图 3.缩略图多张滚动效果直接贴代码 <div class="mod18" ...
jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

jquery 图片左右切换，一长条的显示，点击左右移动。

jquery 图片左右切换，一长条的显示，点击左右移动。相关推荐

最新文章

热门文章