图片自动轮换与拖动效果
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;
}
以上就是拖动效果图