Fatal编程技术网

Javascript 左右滑动效果

javascript jquery css

Javascript 左右滑动效果,javascript,jquery,css,Javascript,Jquery,Css,我对以下html代码有一个简单的定义： <div class="menuTabs"> <div class="mtabArrowLeft">Left</div> <input class="menutabBTN" name="" type="button" value="a" /> <input class="menutabBTN" name="" type="button" value="b"

我对以下html代码有一个简单的定义：

<div class="menuTabs">
        <div class="mtabArrowLeft">Left</div>

       <input class="menutabBTN" name="" type="button" value="a" />
       <input class="menutabBTN" name="" type="button" value="b" />
       <input class="menutabBTN" name="" type="button" value="c" />
       <input class="menutabBTN" name="" type="button" value="d" />
       <input class="menutabBTN" name="" type="button" value="e" />
       <input class="menutabBTN" name="" type="button" value="f"/>
         <div class="mtabArrowRight">Right</div>
      </div>
我们将提前感谢您的帮助

您需要使用类似的方法：

您还可以在此处看到用于左右滑动图像缩略图的代码：

根据第二个站点的代码为您的场景编写一些代码：

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
.menuTabs {
    float: left;
    width: 284px;
    overflow:hidden;
    position:relative;
    height:50px;
}

.img-reel { position:absolute; left:0; top:0; height:50px; }

.mtabArrowLeft {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 15px;
    margin-right: 4px;
}

.mtabArrowRight {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 3px;
    margin-right: 15px;

}

.menutabBTN {
    float: left;
    height: 25px;
    width: 65px;
    margin-right: 3px;
    margin-left: 3px;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 25px;
}

    </style>
</head>
<body>

<div class="mtabArrowLeft">Left</div>
<div class="menuTabs">
        <div class="img-reel">
            <input class="menutabBTN" name="" type="button" value="a" />
            <input class="menutabBTN" name="" type="button" value="b" />
            <input class="menutabBTN" name="" type="button" value="c" />
            <input class="menutabBTN" name="" type="button" value="d" />
            <input class="menutabBTN" name="" type="button" value="e" />
            <input class="menutabBTN" name="" type="button" value="f"/>
        </div>
</div>
<div class="mtabArrowRight">Right</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">


    $(function() {
            var imageWidth = 71;
            var reelSize = 4;
            var imageSum = $('.img-reel input').size();
            var imageReelWidth = imageWidth * imageSum;
            $('.img-reel').css({'width' : imageReelWidth});

            rotate = function(){
                var trigger = $btn.attr('class');
                var image_reelPosition = (trigger=='mtabArrowLeft') ? -imageWidth : imageWidth;
                var reel_currentPosition = $('.img-reel').css('left').replace('px','');
                var pos = reel_currentPosition-image_reelPosition;
                var maxPos = (imageSum-reelSize)*-imageWidth;
                //console.log('pos='+pos+', max='+maxPos);
                if(pos>=maxPos && pos<=0){
                    $('.img-reel').animate({left:pos},300);
                    $('.mtabArrowLeft,.mtabArrowRight').fadeTo(250,1);
                    //console.log('move');
                    if(pos==maxPos){$('.mtabArrowRight').fadeTo(250,0.5);}
                    else if(pos==0){$('.mtabArrowLeft').fadeTo(250,0.5);}
                }
            };
            if (imageSum > 4) {
                $('.mtabArrowLeft,.mtabArrowRight').click(function(){
                    $btn = $(this);
                    rotate();
                    return false;
                });
            }
            else {
                $('.mtabArrowLeft,.mtabArrowRight').fadeTo(0,0.5).click(function(){return false});
            }
    })
</script>
</body>
</html>


梅努塔布斯先生{
浮动：左；
宽度：284px；
溢出：隐藏；
位置：相对位置；
高度：50px；
}
.img卷盘{位置：绝对；左侧：0；顶部：0；高度：50px；}
.Mta Barrowleft{
浮动：左；
高度：25px；
宽度：35px；
左边距：15px；
保证金权利：4px；
}
巴洛维特先生{
浮动：左；
高度：25px；
宽度：35px；
左边距：3倍；
右边距：15px；
}
.menutabBTN{
浮动：左；
高度：25px；
宽度：65px；
右边距：3倍；
左边距：3倍；
填充：0px；
边框顶部宽度：0px；
右边框宽度：0px；
边框底宽：0px；
边框左宽度：0px；
字体系列：塔荷马，日内瓦，无衬线；
字体大小：12px；
颜色：#000；
文本对齐：居中；
线高：25px；
}
左边
赖特
$（函数（）{
var-imageWidth=71；
var reelSize=4；
var imageSum=$（'.img卷筒输入'）.size（）；
var imageReelWidth=imageWidth*imageSum；
$（'.img-reel'）.css（{'width'：imageReelWidth}）；
旋转=函数（）{
var触发器=$btn.attr（'class'）；
var image_reelPosition=（触发器='mtabArrowLeft'）？-imageWidth:imageWidth；
var reel_currentPosition=$（'.img reel'）.css（'left'）。替换（'px'，''）；
var pos=卷盘\u当前位置-图像\u卷盘位置；
var maxPos=（imageSum reelSize）*-imageWidth；
//log（'pos='+pos+'，max='+maxPos）；
如果（位置>=最大位置和位置4）{
$（'.mtabArrowLeft、.mtabArrowRight'）。单击（函数（）{
$btn=$（此项）；
旋转（）；
返回false；
});
}
否则{
$（'.mtabArrowLeft，.mtabArrowRight'）.fadeTo（0,0.5）。单击（函数（）{return false}）；
}
})

Scrollable是一个多功能的、傻瓜式的幻灯片制作解决方案……从上面的链接查看教程（并下载脚本）——这个HTML/CSS/jQuery几乎是直接从网站上获取的

您必须更改CSS中元素的宽度以适合您的设计。希望这能有所帮助

HTML

<div class="mtabArrowLeft prev left">Left</div>

    <div class="menuTabs scrollable">       
         <div class="items">
           <input class="menutabBTN" name="" type="button" value="a" />
           <input class="menutabBTN" name="" type="button" value="b" />
           <input class="menutabBTN" name="" type="button" value="c" />
           <input class="menutabBTN" name="" type="button" value="d" />
           <input class="menutabBTN" name="" type="button" value="e" />
           <input class="menutabBTN" name="" type="button" value="f"/>   
         </div>
    </div>

    <div class="mtabArrowRight next right">Right</div>
jQuery

$(function() {

    // initialize scrollable
    $(".scrollable").scrollable();

});
我不明白你的要求，但看看jQuery的效果（它们有演示）。我建议你看看那里，试着迈出第一步。如果遇到困难，请回答一个更具体的问题。谢谢你，Moin，你能帮我将你的代码应用到我的代码上吗。我已经尝试过了，但没有效果。谢谢 
.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}

.scrollable .items {
    width:20000em;
    position:absolute;
}

.items input {
    float:left;
}

$(function() {

    // initialize scrollable
    $(".scrollable").scrollable();

});