html里面的焦点图效果问题求解答

代码思路：

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

为了保证显示效果的平滑防止左侧无内容，将本应出现在左侧的图片预先放置到最左侧①。为了避免这个图片第一个显示，我们要通过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

})

})

})

代码是“<img scr = '图片地址'>”。

1、新建html文件，在body标签中添加img标签，img标签在html中没有结束标签，所以不需要添加“</img>”代码。给img标签添加属性“src”，属性值填自己想要添加图片的地址，这里以同一目录下的1.png为例，这样图片就添加好了:

2、为了防止用户浏览网页时图片加载失败而不知道这边是什么内容，可以给img标签添加“alt”属性，属性值填想要显示的内容，这里以“鹦鹉”为例，此时，当图片加载失败时，“鹦鹉”两个字就会显示出来：

3、img插入的图片大小默认是图片自身的大小，我们可以用“width”属性和“height”属性控制图片大小，这里以宽度200和高度200为例，此时代码就是“width='200' height='200'”，这样图片大小就会变成200*200：

1、创建html文件。

2、设置页面背景颜色。

3、接下来开始创建段落一。

4、引入图片设置图片大小并设置图片浮动至段落的左边。

5、创建段落二。

6、引入图片设置图片大小并设置图片浮动至段落的右边。

7、预览效果如图。

---