用JQ实现自动轮播效果,鼠标移入暂停和移出继续轮播效果。 |
您所在的位置：网站首页 › 继续播放所有照片 › 用JQ实现自动轮播效果,鼠标移入暂停和移出继续轮播效果。 |
用JQ实现自动轮播效果,鼠标移入暂停和移出继续轮播效果。
|
直接上图:
;
;
/*
1.每隔一段时间切换一张图片（自动）
2.点击左右按钮切换图片（点左上一张，点右下一张）
3.点击焦点切换到焦点的索引对应的那一张图片
4.鼠标移入图片区域暂停自动播放，鼠标移出继续播放
*/
//封装一个方法，调用这个方法
//切换图片
function changeImg(a){//实参代表图片索引的一个数字
$('.imgList li').eq(a).fadeIn().siblings().fadeOut();//淡入显示，其它隐藏
$('.focusList a').eq(a).addClass('cur').siblings().removeClass('cur');//添加class，其它删除
}
//自动播放按顺序执行
var step=0;//用全局变量做一个声明 每隔2s做一个调用
changeImg(step);//页面刚进入默认第一张显示
var timer=null;//定义为全局定时器，其它的方法就可以访问到这个定时器
function autoPlay(){
//定义一个变量接收定时器
timer= setInterval(function(){
step++;
if(step===5){
step =0;//从第一张开始轮播
}
changeImg(step);
},2000);
}
autoPlay();
//点击左按钮切换
$('.leftBtn').click(function(){
clearInterval(timer);//清除定时器
step--;//每点击一下就减减
if(step===-1){
step=4;//当减到最后一张时，让图片从最后一张开始
}
changeImg(step);//图片跟着变化
autoPlay();//当不点击按钮的时候，在继续执行定时器
})
//点击右按钮切换
$('.rightBtn').click(function(){
clearInterval(timer);//清除定时器
step++;//每点击一下就减减
if(step===5){
step=0;//当加到最后一张时，让图片从第一张开始
}
changeImg(step);//图片跟着变化
autoPlay();//当不点击按钮的时候，在继续执行定时器
})
//点击焦点切换
$('.focusList a').click(function(){
clearInterval(timer);//先清除定时器
step=$(this).index();//赋值给当前索引
changeImg(step);//执行step图片
autoPlay();//不点击的时候在执行定时器
})
//鼠标移入图片区域暂停自动播放，鼠标移出继续播放
$('.imgList').mouseover(function(){//mouseiver鼠标移入
console.log($('.imgList'));
clearInterval(timer);//先清除定时器
}).mouseout(function(){//mouseiver鼠标移出
autoPlay();//继续执行定时器
})
总结:如果不想要箭头的切换效果，可以去掉左边和右边的按钮事件，就可以实现效果。 :想要在移动端运行的可以自己改变css样式，把px转变成rem或者百分比 下一篇文章:实现自动轮播图片和手指触屏切换图片效果； |
代码如下：【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |