本文目录一览：
- 1、如何用原生js和css制作轮播图
- 2、css+js做图文幻灯片思路
- 3、用HTML+CSS+JS制作出幻灯片效果
- 4、如何使用js来控制图片的css样式？
- 5、如何用css、js把一张图片上的图案制作成动画
如何用原生js和css制作轮播图
曾经插件不太流行我就自己写，这个问题我来回答你，原生你需要对CSS跟JS都比较熟练，才能去制作，先用CSS排版出你需要的界面，之后才能去写JS。
JS部分你要取出你的轮播图个数，然后定义一个切换到单前的变量，再定义切换效果，切到最后一张图片了要如何处理，切换都第一张用户点击上一站又要如何处理。当你这些都处理好了之后，一个页面多个轮播等等，JS兼容页面兼容又得处理吧，我就问你头痛不。
现在使用框架这些通通都不用自己管，高效轻松他不好吗？
css+js做图文幻灯片思路
循环图片和按钮 都加上索引
然后给每个按钮加上事件
也就是说当点击第几个按钮就显示第几张图片。
用HTML+CSS+JS制作出幻灯片效果
纯JS+HTML+CSS制作出的幻灯片效果
代码简单，思路讲解也很清晰，有详细demo示例
如何使用js来控制图片的css样式？
这个可以用CSS实现就好了。不必要使用JS
图片放大效果的话，建议用一个额外的 div层放置放大后的图片，这样布局就不会乱了。鼠标放上去就显示这个层。
.img2{
/*这里写你的所有图片都会用到的样式*/
}
.img2:first-child, .img2:last-child{
/*这里写第一个图片和最后一个图片会用到的样式*/
}
.img1:hover .showBigImg{
display:block;
}
对于这个大图的div层的显示，可以稍加js控制，这样就可以所有图片共用一个div层来放置大图。
希望能帮助到你
如何用css、js把一张图片上的图案制作成动画
把你的图片按1、2、3。。。的顺序命名 以便用循环调用 具体js可用setInterval函数
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/280790.html
微信扫一扫 
支付宝扫一扫 