关于html中 焦点图片轮播代码 position

relative绝对定位，left，top值相对于自身移动，absolute相对定位，left，top值相对于其父级或者祖先级中第一个设置relative的位置进行移动，如果没有设置则相对于body的位置移动，absolute会脱离正常的文本流，撑不开父级高度，而relative不会。

代码思路：

点击向左的按钮以后显示左侧预先放置好图片来保证平滑动画效果。

为了保证显示效果的平滑防止左侧无内容，将本应出现在左侧的图片预先放置到最左侧①。为了避免这个图片第一个显示，我们要通过CSS将这个图片的容器(父级)向左侧移动，隐藏这个图片。由于一个图片宽度是141px，设定CSS内父级元素左侧距离-141px②。并修改JS内的基准CSS坐标为-141px③移动最后一个元素到第一位的时候必须要移动到第一位前面，after的反义词是before。修改函数名，将插入点移动到第一个元素前面④。其余代码由提问者提供。不做解释。

附上效果图+代码说明：

以下内容只包含关键代码！

HTML部分：

    <div class="imgxianshi_1">

     <div class="imgbox_1">

            <img class="tupian10" src="images/tupian_10.png"><!--①:预先放置到左侧-->

            <img class="tupian01" src="images/tupian_01.png">

            <img class="tupian02" src="images/tupian_02.png">

            <img class="tupian03" src="images/tupian_03.png">

            <img class="tupian04" src="images/tupian_04.png">

            <img class="tupian05" src="images/tupian_05.png">

            <img class="tupian06" src="images/tupian_06.png">

            <img class="tupian07" src="images/tupian_07.png">

            <img class="tupian08" src="images/tupian_08.png">

            <img class="tupian09" src="images/tupian_09.png">

        </div>

</div>

CSS部分：

.imgbox_1{ width:3400px height:91px position:absolute top:0px left:-141px margin:0 auto } /* ②left:-141px调整距离 */

JS部分：

/*点左按钮向左走*/

$(".bj_20").click(function(){

$(".imgbox_1").animate({left:0},1000,function(){/* ③向左要增加left，基准-141增加141就是0，left:0 */

$(".imgbox_1 img:last").insertBefore($(".imgbox_1 img:first"))//④在第一个元素之前插入

$(".imgbox_1").css({left:-141})//③修改基准为-141

})

})

/*点右按钮向右走*/

$(".bj_21").click(function(){

$(".imgbox_1").animate({left:-282},1000,function(){/* ③向右要减少left，基准-141减少141就是-282，left:-282 */

$(".imgbox_1 img:first").insertAfter($(".imgbox_1 img:last"))//④在最后一个元素之后插入

$(".imgbox_1").css({left:-141})//③修改基准为-141

})

})

})

代码如下:

1、<img src="divcss5-logo-201305.gif" width="165" height="60" />

img介绍：

src 后跟的是图片路径地址

width 设置图片宽度

height 设置图片高度

2、我们在html源代码中分别插入三张图片，一张原始大、一张将宽度高度改小小、一张将宽度高度改大。

3、效果图：

扩展资料:

在HTML中出现图片通常有2种：

1、某元素的背景图像【绝大多数元素都可以通过background属性设置其背景图像】

直接在html中的标签里设置：

<p style=”background-image:url(xxx.jpg)“>设置一个段落的背景图像</p>

在CSS上设置html中的 ”<p>一个段落</p>“ 的背景图像：

p{ background-image:url(xxx.jpg)}

2、图像元素img：

<img src="xxx.jpg" alt="这是一个图像元素">

---