/*焦点图*/
var Box='.carousel';//盒子
var Menu=$(Box+' .l_cursor li');//圆点菜单
var Con=$(Box+' .carouselChange li');//大图
var Text=$(Box+' .text li');//图注文字
var Prev=$(Box+' .Prev');//上一页
var Next=$(Box+' .next');//下一页
var Counts=$(Con).size();//获取li总数
var nowIndex=0;
var timer;
/* 点击切换 */
$(Menu).click(function(){
var i=$(Menu).index(this)
gotoPage(i);
});
/* 打开相应的标签 */
function gotoPage(i){
$(Menu).removeClass("current").eq(i).addClass("current");
$(Con).fadeOut(200).eq(i).fadeIn(200);
$(Text).hide().eq(i).fadeIn(200);
nowIndex=i;
};
/* 下一页 */
$(Next).click(function(){
gotoR();
});
function gotoR(){
nowIndex++;
if(nowIndex > Counts-1){
nowIndex=0;
}
gotoPage(nowIndex);
};
/* 上一页 */
$(Prev).click(function(){
nowIndex--;
if(nowIndex < 0){
nowIndex=Counts-1
}
gotoPage(nowIndex);
});
/* 自动轮播 */
function setAuto(){
if(Counts>1){
timer=setInterval(gotoR,3000);
};
};
setAuto();
/* 鼠标经过暂停,离开继续轮播 */
$(Box).hover(function(){
$(Prev).show();
$(Next).show();
if(timer){
clearInterval(timer);
}
},
function(){
$(Prev).hide();
$(Next).hide();
setAuto();
});
/*焦点图*/
相关文章
- 01-31VueEasySlider - 基于 Vue.js 的简洁开源轮播图组件
- 01-31js、html前端pc端根据url点击下载图片
- 01-31JS练习_鼠标移入显示大图
- 01-31.net core实现单文件上传、多文件上传、js提交实现文件上传、图片预览
- 01-31js提交文件或图片,同时提交到2个服务器上
- 01-31CSS3之3D轮播图
- 01-31js 使用微信公众号jssdk的接口,扫码,选择图片,获取位置信息
- 01-31用vue组件做轮播图
- 01-31NX二次开发-UFUN工程图插入PNG图片UF_DRF_create_image_from_file
- 01-31NX二次开发-UFUN设置工程图PNG图片长度UF_DRF_set_image_width