通过js实现图片左右点击图片左右切换效果

                                            通过js实现图片左右点击图片左右切换效果

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术: Dreamweaver 通过js实现图片左右点击图片左右切换效果

作者:戴伟雄

撰写时间:2019年1月18日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

       通过图片左右的点击实现图片的左右切换,其实先看一下代码吧()

这边HTML代码是一个大div然后一个装图片的div还有两个div

通过js实现图片左右点击图片左右切换效果_第1张图片

 

这边是用css设置样式

这里是设置大div的宽高居中然后超出影藏

这边是下面两个div的宽高给了浮动、定位然后它们就平分了大div

然后还有图片的div和图片的样式

通过js实现图片左右点击图片左右切换效果_第2张图片

 

 

通过js实现图片左右点击图片左右切换效果_第3张图片

这里是js部分,只是一个简单的图片切换。给了两个div一个点击事件 然后设置的相关的值。

两个div是平分了大div,所以左右点击就能触发不同的点击事件。

从而实现图片左右切换的效果呢(画的有点不稳还请谅解一下)

通过js实现图片左右点击图片左右切换效果_第4张图片

 

你可能感兴趣的:(前端)