图片轮换与拖动效果
来源：互联网 发布：公安局 网络皮条客 编辑：程序博客网 时间：2024/04/29 17:36
图片自动轮换与拖动效果
1、去年做的一个图片拖动与轮换的东东，网页中的图片拖动的时候会打开一个新的窗口显示图片，
所以我在上面加了一层DIV拖动的时候直接拖动DIV，里层的图片跟着走动。
2、 图片轮换效果，fadeTo函数的淡入淡出效果，设置上层图片(a)透明度到0.5的时候，
底层图片(b)开始淡入，当b完全显示之后a再完全淡出
3、鼠标移到下面导航时显示相对应的图片，同样图片轮换时，导航也会随着轮换
/**图片轮换开始**/ var i = 0; var images = $(".recommend_imgs_click"); function img_rotate(){ if(i==4){ $(images[4]).fadeTo(1500,0.5,function(){ $(".recommend_imgs_click2").css("color","#BDBCBC"); $($(".recommend_imgs_click2")[0]).css("color","#2F7C2F"); // alert( $($(".recommend_imgs_click2")[0]).css("color")); $(images[0]).fadeTo(2000,1,function(){ $(images[4]).fadeTo(1,0); i=0; }); }); }else{ $(images[i]).fadeTo(2000,0.5,function(){ $(".recommend_imgs_click2").css("color","#BDBCBC"); $($(".recommend_imgs_click2")[i+1]).css("color","#2F7C2F"); $(images[i+1]).fadeTo(2000,1,function(){ $(images[i]).fadeTo(1,0); i++; }); }); } } imgs_rotate = window.setInterval(img_rotate, 7000); /************/ //加载页面时显示第一张图 $(".recommend_imgs_click").css("display","none"); $($(".recommend_imgs_click2")[0]).css("color","#2F7C2F"); $($(".recommend_imgs_click")[0]).show("slow"); //鼠标覆盖下面A标签时图片显示 $(".recommend_imgs_click2").hover(function(){ $(".recommend_imgs_click2").css("color","#BDBCBC"); $(this).css("color","#2F7C2F"); clearInterval(imgs_rotate); // $($(".recommend_imgs_click")[i]).fadeTo(1,0); $($(".recommend_imgs_click")[i]).css("display","none"); // $($(".recommend_imgs_click")[parseInt(this.id)]).css("display","block"); $($(".recommend_imgs_click")[parseInt(this.id)]).fadeTo(1,1); i =parseInt(this.id); },function(){ imgs_rotate = setInterval(img_rotate, 7000); }); //下面是鼠标点击图片 然后拖动鼠标实现滑动 //鼠标放在图片上图片静止 移开循环继续 $(".move_click").hover(function(){ clearInterval(imgs_rotate); },function(){ imgs_rotate = setInterval(img_rotate, 7000); }); //滑动翻页效果 //全局变量用于记录鼠标的横坐标 var x1 = 0; //记录鼠标按下时候坐标 var x2 = 0; //记录鼠标离开时候坐标 var relative_pos = 0; //用于记录按下时候 鼠标相对移动元素左边框的距离 var flag = 0; //用于记录当前鼠标的按下状态 1为已按下 0为未按下 var id_prev = 0; //用于滑动时候 当前图片的上一个图片 var id_next = 0; //用于滑动时候 当前图片的下一个图片 var id_current = 0; //用于滑动时候当前图片 $(".move_click").mousedown(function(e){ clearInterval(imgs_rotate); x1 = e.pageX; id_current = parseInt($(this).parent().attr("id")); var left_pos = $("#recommend_imgs").css("left");//父节点的父节点 不动元素 var left_pos2 = $("#"+id_current).css("left");//当前点击的父节点 移动元素 relative_pos = parseInt(x1)-parseInt(left_pos)-parseInt(left_pos2); flag = 1; if(id_current==14){ id_prev = 13; id_next = 10; }else if(id_current==10){ id_prev = 14; id_next = 11; }else{ id_prev = id_current-1; id_next = id_current+1; } $("#"+id_prev).css({"left":"-100%","display":"block"}); $("#"+id_prev).fadeTo(1,1); $("#"+id_next).css({"left":"100%","display":"block"}); $("#"+id_next).fadeTo(1,1); }); $(".move_click").mousemove(function(e){ if(flag ==1){ var x = parseInt(e.pageX); left_pos = x - relative_pos; var left_pos_pre = left_pos-1040; var left_pos_next = left_pos+1040; $("#"+id_current).css("left",left_pos); $("#"+id_prev).css("left",left_pos_pre); $("#"+id_next).css("left",left_pos_next); }else{ return ; } }); $(".move_click").mouseup(function(e2){ flag = 0; x2 = e2.pageX; var rel = parseInt(x2)-parseInt(x1); if(rel>200){ i = id_prev-10; $("#"+id_current).animate({left: '+100%'}, "fast",function(){ $(".recommend_imgs_click").css({"left":"0px","display":"none"}); $($(".recommend_imgs_click")[i]).css("display","block"); }); $("#"+id_prev).animate({left: '+0px'}, "fast"); $(".recommend_imgs_click2").css("color","#BDBCBC"); //下面索引 $("#"+(id_prev-10)).css("color","#2F7C2F"); }else if(rel<-200){ i = id_next-10; $("#"+id_current).animate({left: '-100%'}, "fast",function(){ $(".recommend_imgs_click").css({"left":"0px","display":"none"}); $($(".recommend_imgs_click")[i]).css("display","block"); }); $("#"+id_next).animate({left: '+0px'}, "fast"); $(".recommend_imgs_click2").css("color","#BDBCBC");//下面索引 $("#"+(id_next-10)).css("color","#2F7C2F"); }else{ i = id_current-10; $("#"+id_current).animate({left: '-0px'}, "fast",function(){ $(".recommend_imgs_click").css({"left":"0px","display":"none"}); $($(".recommend_imgs_click")[i]).css("display","block"); }); $("#"+id_next).animate({left: '+100%'}, "fast"); $("#"+id_prev).animate({left: '-100%'}, "fast"); } id_prev = 0; id_next = 0; //imgs_rotate = setInterval(img_rotate, 7000); }); /** 图片轮换结束**/<!-- 下面部分是网页中代码 图片等所有都是静态的 不是读取的数据--> <div class="recommend" id="recommend"> <div class="recommend_imgs" id="recommend_imgs"> <div id="10" class="recommend_imgs_click" > <img class="rec_img" alt="" src="images/recommend_imgs/recommend0.jpg"> <div id="a" class="move_click" onselectstart="return false"></div> </div> <div id="11" class="recommend_imgs_click"> <img class="rec_img" alt="" src="images/recommend_imgs/recomend_2.jpeg"> <div id="b" class="move_click" onselectstart="return false"></div> </div> <div id="12" class="recommend_imgs_click"> <img class="rec_img" alt="" src="images/recommend_imgs/recomend_3.jpeg"> <div id="c" class="move_click" onselectstart="return false"></div> </div> <div id="13" class="recommend_imgs_click"> <img class="rec_img" alt="" src="images/recommend_imgs/recomend_4.jpeg"> <div id="d" class="move_click" onselectstart="return false"></div> </div> <div id="14" class="recommend_imgs_click"> <img class="rec_img" alt="" src="images/recommend_imgs/recomend_5.jpeg"> <div id="e" class="move_click" onselectstart="return false"></div> </div> </div> <div class="recommend_img_click"> <a href="javascript:void(0)" class="recommend_imgs_click2" id="0">网易杂志</a> <a href="javascript:void(0)" class="recommend_imgs_click2" id="1">9块9包邮购</a> <a href="javascript:void(0)" class="recommend_imgs_click2" id="2">GO桌面</a> <a href="javascript:void(0)" class="recommend_imgs_click2" id="3">墨迹相机</a> <a href="javascript:void(0)" class="recommend_imgs_click2" id="4">重返热血</a> </div> </div>
CSS样式.recommend{ position: relative; /* left: 135px;*/ top: 95px; width: 1080px; height: 250px; background-color: white; border: 1px solid #E2E3E1; margin:0 auto; }.recommend .recommend_imgs{ position:absolute; left:20px; top:5%; width: 1040px; height: 80%; background-color: silver; overflow: hidden;} .recommend .recommend_imgs .recommend_imgs_click{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}.move_click{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index:5; background-color: red; opacity:0;}.recommend_imgs_click img{ position:absolute; left:0; top:0; width: 100%; height: 100%;}.recommend .recommend_img_click{ position: absolute; right: 5px; bottom: 5px;}.recommend .recommend_imgs_click2{ color: #BDBCBC; text-decoration: none;}
以上就是拖动效果图
0 0
- 图片轮换与拖动效果
- 图片轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片轮换渐变效果
- js 图片轮换效果
- 图片轮换效果实现
- js图片轮换效果
- 图片轮换效果
- CSDN轮换广告图片轮换效果
- 动态图片渐变轮换效果
- meizz的图片轮换效果
- JS实现图片轮换效果
- 迅雷焦点图片轮换效果
- 2.cocos2d-x程序运行原理分析
- 查看linux内存使用情况
- 每日jsp 特效（一） 产生随机的颜色
- IIS发布程序
- 【cocos2dx-3.0beta-制作flappybird】玄关是必要的—游戏欢迎界面的创建
- 图片轮换与拖动效果
- Unity3D场景搭建5:相机
- 黑马程序员 Thread.start()与Thread.run()有什么区别
- linux shell 中"2>&1"含义
- Tomcat启动分析
- VMware ESXi 中的 CentOS 硬盘扩容
- RandomAccessFile 替换文件内容 并写入
- selenium运行自动化脚本（调试验证通过）
- UVa 834 - Continued Fractions
