为了账号安全,请及时绑定邮箱和手机立即绑定

要填什么才能控制 left 的加减 在线等 急!!!

/ 猿问

要填什么才能控制 left 的加减 在线等 急!!!

Anoxia_ 2017-08-29 20:43:43
<div id="box">
            <div id="picture" style="left: -600px;">
                <img src="img/5.jpg"/><!--0-->
                <img src="img/1.jpg"/><!-- -600 --><!--默认-->
                <img src="img/2.jpg"/><!-- -1200 -->
                <img src="img/3.jpg"/><!--1800-->
                <img src="img/4.jpg"/><!--2400-->
                <img src="img/5.jpg"/>
                <img src="img/1.jpg"/>
            </div>
            <div id="button">
            <a href="#" class="left_a"><img src="img/箭头左.png"/></a>
            <a href="#" class="right_a"><img src="img/箭头右.png"/></a>
        </div>
        </div>
$(document).ready(function(){
    $(".left_a").mousedown(function(){
        ?
    })
    $('.right_a').mousedown(function(){
        ?
    })
})
*{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 600px;
                height: 400px; 
                border: 2px solid black;
                overflow: hidden;
                position: relative;
                top: 100px;
                left: 100px;
            }
            #picture{
                width: 4200px;
                position: absolute;
            }
            img{
                float: left;
            }
            #button{
                width: 600px;
                position: absolute;
                top: 170px;
                left: 0px;
            }
            .left_a{
                float: left;
                margin: 0 20px;
                
            }
            .right_a{
                float: right;
                margin: 0 20px;
            }
            #box:hover img{
                background-color: rgba(0,0,0,0.5);
            }

http://img.mukewang.com/59a65bae0001fe3404040271.jpg

查看完整描述

6 回答

?
林逸舟丶
  $(".left_a").mousedown(function(){
              var picture=$("#picture");
        var befo=picture.css("left");
        var left_a=befo-600+"px";
        picture.css("left",left_a);
    })

可能这就是你想要的代码,点击left图标后,div#picture的left属性-600px。

---------------------------------------------------------------------------

补充一下:这样写是直接无动画切换到上一张图,带动画的可以用.animate,带指定left属性和毫秒数可实现切换效果。如楼下所示,整个重点即是要控制$("#picture")的方法。

查看完整回答
反对 回复 2017-09-01
?
Hardy丶

jQuery提供的访问元素的演示属性css()方法可以实现啊,.css("left","多少px");

如果要做动画效果就是.animate({“left”:“多少px”},多长时间完成)

查看完整回答
反对 回复 2017-08-30
?
FSYu
<div id="button">
    <a href="#" class="left_a" style="display:inline-block"><img src="img/箭头左.png" style="width:40px;position:relative;" /></a>
    <a href="#" class="right_a" style="display:inline-block"><img src="img/箭头右.png" style="width:40px;position:relative;" /></a>
</div>

<script>
    $(document).ready(function() {
        $(".left_a").mousedown(function() {
            $(".left_a img").css("left", "-4px");
        })
        $(".left_a").mouseup(function() {
            $(".left_a img").css("left", "0");
        })
        $('.right_a').mousedown(function() {
            $(".right_a img").css("right", "-4px");
        })
        $('.right_a').mouseup(function() {
            $(".right_a img").css("right", "0");
        })
    })
</script>


这种效果不是应该用css的hover吗,这个倒是也能写

查看完整回答
反对 回复 2017-08-30
  • Anoxia_
    Anoxia_
    我把CSS和效果图贴上来了,你再看一下,谢谢啦。
  • FSYu
    FSYu
    你把左右箭头图片加上定位就可以了,你要的那种效果我上面的代码就可以
?
Gotta

css有写嘛……

#box的 position:relative

#picture的 position:absolute 

left才能起作用呀

查看完整回答
反对 回复 2017-08-30
?
林逸舟丶

在方法内 可以直接使用$(this).具体属性(表达式)进行操作。

例如要控制position的left:$(this).style.left=i++    //i应在之前定义为具体数值例如:600 ,除++外也可以进行其他step操作,例如+=20,即每次增加20,然后应在后面加上字符串+“px”。带上单位才能正确改变left属性。

查看完整回答
反对 回复 2017-08-29
?
林逸舟丶

你再描述一下你要实现的功能是什么 光看代码不知道你要进行什么操作无法进行建议呢。

查看完整回答
反对 回复 2017-08-29
  • Anoxia_
    Anoxia_
    轮播图效果现在做的是按钮切换
  • Anoxia_
    Anoxia_
    鼠标点击 .left_a 让picture实现左切换
  • 林逸舟丶
    林逸舟丶
    那么建议在div中仅添加一张图片,然后在.left_a的mousedown写background-image的切换代码:$(#div).css("background-image","url")

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信