Javascript 我创建了一个jquery旋转木马,并使用if条件运行和停止旋转木马

Javascript 我创建了一个jquery旋转木马,并使用if条件运行和停止旋转木马,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经创建了一个jQuery旋转木马,如果条件是运行并停止它,如果复选框被选中,旋转木马就会向左运行,否则如果复选框被选中,旋转木马需要停止,我不知道该怎么做,请有人帮我做 $("#checkBox").click(function(){ if($(this).prop("checked") == true){ carouselRun(); } else if($(this).prop("checked") == false){ carou

我已经创建了一个jQuery旋转木马,如果条件是运行并停止它,如果复选框被选中,旋转木马就会向左运行,否则如果复选框被选中,旋转木马需要停止,我不知道该怎么做,请有人帮我做

$("#checkBox").click(function(){
    if($(this).prop("checked") == true){
        carouselRun();
    }
    else if($(this).prop("checked") == false){
        carouselStop();
    }
});  
jQuerydocument.readyfunction${ 变量mslideWidth=500,mslideHeight=105,speed=3000, slideCount=$“slider ul li.”长度, slideWidth=$“slider ul li.”宽度, slideHeight=$“slider ul li.”高度, sliderUlWidth=slideCount*slideWidth; 功能旋转木马{ 设置间隔函数{ 右移; },速度; }; 功能旋转木马{ 设置间隔函数{ 左移; },speed.stop; }; $“复选框”。单击函数{ 如果$this.propchecked==true{ 旋转木马; } 否则如果$this.propchecked==false{ 旋转木马; } }; 如果mslideWidth!=0 | | mslideHeight!=0{ 滑动宽度=滑动宽度; 滑动高度=滑动高度; $'slider ul li'.css'width',mslideWidth; $'slider ul li'.css'height',mslideHeight; } $'slider'.css{宽度:slideWidth,高度:slideHeight}; $'slider ul'.css{width:sliderUlWidth,marginLeft:-slideWidth}; $'slider ul li:最后一个孩子'。前缀为'slider ul'; 函数左移{ $'slider ul'。设置动画{ 左:+slideWidth },功能{ $'slider ul li:最后一个孩子'。前缀为'slider ul'; $'slider ul'.css'left'; }; }; 功能右移{ $'slider ul'。设置动画{ 左:-滑动方向 },功能{ $'slider ul li:第一个孩子'。附加到'slider ul'; $'slider ul'.css'left'; }; }; $'a.control\u prev'。单击函数{ 左移; }; $'a.control\u next'。单击函数{ 右移; }; }; @进口urlhttp://fonts.googleapis.com/css?family=Open+Sans:400300600; html{ 边框顶部:5px实心fff; 背景:58DDAF; 颜色:2A2A; } html,正文{ 保证金:0; 填充:0; 字体系列:“开放式SAN”; } h1{ 颜色:fff; 文本对齐:居中; 字体大小:300; } 滑块{ 位置:相对位置; 溢出:隐藏; 保证金:20px自动0自动; 边界半径:4px; } 滑块ul{ 位置:相对位置; 保证金:0; 填充:0; 列表样式:无; } 李小玲{ 位置:相对位置; 显示:块; 浮动:左; 保证金:0; 填充:0; 宽度:500px; 高度:100px; 背景:ccc; 文本对齐:居中; } a、 控制上一个,控制下一个{ 位置:绝对位置; 排名前10%; z指数:999; 显示:块; 填充:4%3%; 宽度:自动; 高度:自动; 背景:2A2A; 颜色:fff; 文字装饰:无; 字号:600; 字号:18px; 不透明度:0.8; 光标:指针; } a、 控制上一个:悬停,a。控制下一个:悬停{ 不透明度:1; -webkit过渡:所有0.2秒轻松; } a、 控制前{ 边界半径:0 2px 2px 0; } a、 控制下一步{ 右:0; 边界半径:2px 0 0 2px; } .U选项{ 位置:相对位置; 利润率:10px自动; 宽度:160px; 字号:18px; } 自动播放滑块
您需要使用clearInterval功能来停止计时器和旋转木马。使用以下命令更改carouselRunand carouselstop函数,并将间隔变量添加到定义变量的位置

function carouselRun(){
    interval = setInterval(function () {
        moveRight();
    }, speed);
};

function carouselStop(){
    clearInterval(interval);
};
工作示例:

jQuerydocument.readyfunction${ 变量mslideWidth=500,mslideHeight=105,speed=3000, slideCount=$“slider ul li.”长度, slideWidth=$“slider ul li.”宽度, slideHeight=$“slider ul li.”高度, sliderUlWidth=slideCount*slideWidth, 间隔 功能旋转木马{ 间隔=设置间隔函数{ 右移; },速度; }; 功能旋转木马{ 清晰间隔; }; $“复选框”。单击函数{ 如果$this.propchecked==true{ 旋转木马; } 否则如果$this.propchecked==false{ 旋转木马; } }; 如果MslideWidth!=0 | | mslideHeight!=0{ 滑动宽度=滑动宽度; 滑动高度=滑动高度; $'slider ul li'.css'width',mslideWidth; $'slider ul li'.css'height',mslideHeight; } $'slider'.css{宽度:slideWidth,高度:slideHeight}; $'slider ul'.css{width:sliderUlWidth,marginLeft:-slideWidth}; $'slider ul li:最后一个孩子'。前缀为'slider ul'; 函数左移{ $'slider ul'。设置动画{ 左:+slideWidth },功能{ $'slider ul li:最后一个孩子'。前缀为'slider ul'; $'slider ul'.css'left'; }; }; 功能右移{ $'slider ul'。设置动画{ 左:-滑动方向 },功能{ $'slider ul li:第一个孩子'。附加到'slider ul'; $'slider ul'.css'left'; }; }; $'a.control\u prev'。单击函数{ 左移; }; $'a.control\u next'。单击函数{ 右移; }; }; @进口urlhttp://fonts.googleapis.com/css?family=Open+Sans:400300600; html{ 边框顶部:5px实心fff; 背景:58DDAF; 颜色:2A2A; } html,正文{ 保证金:0; 填充:0; 字体系列:“开放式SAN”; } h1{ 颜色:fff; 文本对齐:居中; 字体大小:300; } 滑块{ 职位:re 相对的; 溢出:隐藏; 保证金:20px自动0自动; 边界半径:4px; } 滑块ul{ 位置:相对位置; 保证金:0; 填充:0; 列表样式:无; } 李小玲{ 位置:相对位置; 显示:块; 浮动:左; 保证金:0; 填充:0; 宽度:500px; 高度:100px; 背景:ccc; 文本对齐:居中; } a、 控制上一个,控制下一个{ 位置:绝对位置; 排名前10%; z指数:999; 显示:块; 填充:4%3%; 宽度:自动; 高度:自动; 背景:2A2A; 颜色:fff; 文字装饰:无; 字号:600; 字号:18px; 不透明度:0.8; 光标:指针; } a、 控制上一个:悬停,a。控制下一个:悬停{ 不透明度:1; -webkit过渡:所有0.2秒轻松; } a、 控制前{ 边界半径:0 2px 2px 0; } a、 控制下一步{ 右:0; 边界半径:2px 0 0 2px; } .U选项{ 位置:相对位置; 利润率:10px自动; 宽度:160px; 字号:18px; } 自动播放滑块