关于jQuery轮播动画
2016-11-30 12:10
330 查看
作为学习笔记轮播动画,不废话,直接上代码:
HTML插入三张图片:
<div class="body2">
<ul class="slider">
<li><a><img src="xtf_images/rollimg1.jpg" class="bodyimg2" name="img1"></a></li>
<li><a><img src="xtf_images/rollimg2.jpg" class="bodyimg2" name="img2" ></a></li>
<li><a><img src="xtf_images/rollimg3.jpg" class="bodyimg2" name=img3></a></li>
</ul>
</div>
设置样式,注意图片与div大小
.slider{
position:relative;
height:395px;
margin-top:0px;
}
li{
list-style:none;
}
.body2{
position:absolute;
top:30.3%;
left:11.8%;
height:400px;
width:1147.5px;
overflow:hidden;
}
js方法
//图片滚动
$(document).ready(function(){
var len=$(".slider>li").length;
var index=0;
var adTimer;
$(".slider>li").mouseover(function(){
index=$(".slider>li").index(this);
}).eq(0).mouseover();//鼠标离开时开始动画
//鼠标悬停时停止动画
$(".slider").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
showImg(index);
index++;
if(index==len){
index=0;
}
},3000);
}
).trigger("mouseleave");
//图片轮换
});
function showImg(index){
var adHeight=$(".body2>ul>li:first").height();
$(".slider").stop(true,false).animate({
marginTop:-adHeight*index+"px"
},1000);
}
关于实现方法里面的元素,比较简单,查资料就可以了
HTML插入三张图片:
<div class="body2">
<ul class="slider">
<li><a><img src="xtf_images/rollimg1.jpg" class="bodyimg2" name="img1"></a></li>
<li><a><img src="xtf_images/rollimg2.jpg" class="bodyimg2" name="img2" ></a></li>
<li><a><img src="xtf_images/rollimg3.jpg" class="bodyimg2" name=img3></a></li>
</ul>
</div>
设置样式,注意图片与div大小
.slider{
position:relative;
height:395px;
margin-top:0px;
}
li{
list-style:none;
}
.body2{
position:absolute;
top:30.3%;
left:11.8%;
height:400px;
width:1147.5px;
overflow:hidden;
}
js方法
//图片滚动
$(document).ready(function(){
var len=$(".slider>li").length;
var index=0;
var adTimer;
$(".slider>li").mouseover(function(){
index=$(".slider>li").index(this);
}).eq(0).mouseover();//鼠标离开时开始动画
//鼠标悬停时停止动画
$(".slider").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
showImg(index);
index++;
if(index==len){
index=0;
}
},3000);
}
).trigger("mouseleave");
//图片轮换
});
function showImg(index){
var adHeight=$(".body2>ul>li:first").height();
$(".slider").stop(true,false).animate({
marginTop:-adHeight*index+"px"
},1000);
}
关于实现方法里面的元素,比较简单,查资料就可以了
相关文章推荐
- 关于Jquery中的链式编程和动画效果(注意事项)
- 关于jquery的动画效果
- 关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?
- 关于jquery的淡入淡出轮播图
- mysqli+ajax+php+jquery实现动画轮播图
- jquery轮播动画
- jquery淡入淡出轮播动画
- 轮播图~动画轮播的jquery详细代码写法
- jQuery之轮播图向左滚动动画【原创】
- 关于火狐中使用jquery的animate做动画效果的问题解决
- 关于app启动动画如何做到第一次启动采用图片轮播,以后启动都只有1张图片的解决方案
- 关于用jQuery知识来实现优酷首页轮播图!
- jQuery中关于如何使用animate自定义动画
- Jquery鼠标控制图片轮播,animate()动画队列,stop()清除队列
- 用jquery动画实现的简单的图片轮播
- jQuery动画效果图片轮播特效
- jquery实现简单的轮播动画
- 【实践】jquery实现滑动动画及轮播
- 关于JQuery(最后一点动画效果*)
- jQuery插件slicebox实现3D动画图片轮播切换特效