如何用原生js和css制作轮播图_安全

曾经插件不太流行我就自己写，这个问题我来回答你，原生你需要对CSS跟JS都比较熟练，才能去制作，先用CSS排版出你需要的界面，之后才能去写JS。
JS部分你要取出你的轮播图个数，然后定义一个切换到单前的变量，再定义切换效果，切到最后一张了要如何处理，切换都第一张用户点击上一站又要如何处理。当你这些都处理好了之后，一个页面多个轮播等等，JS兼容页面兼容又得处理吧，我就问你头痛不。
现在使用框架这些通通都不用自己管，高效轻松他不好吗？

打开dw软件，左上角会有代码、拆分、设计三个选项，选在代码，打开在body后插入代码：<DIV>
J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main',
'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-
750px; HEIGHT: 350px"alt="" align=absMiddle src="地址"></A> <li><A href="链接地址"
target=_blank><img style="WIDTH: 750px; HEIGHT: 350px"alt="" align=absMiddle src="地
350px"alt="" align=absMiddle src="地址"></A></li></ul></DIV>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css实现轮播效果</title> <style type="text/css"> one { position: absolute; width: 500px; height: 400px; overflow: hidden; } one_cantent img { width: 500px; height: 300px; float: left; } one_cantent { width: 2500px; height: 400px; position: absolute; left: 0px; animation-name: move; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes move { 0% { left: 0px; } 25% { left: -500px; } 50% { left: -1000px; } 75% { left: -1500px; } 100% { left: -2000px } } </style> </head> <body> <div> <div> <img src="/image/0jpg"> <img src="/image/1jpg"> <img src="/image/2jpg"> <img src="/image/3jpg"> <img src="/image/4jpg"> </div> </div> </body> </html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<meta >

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/yw/10537483.html

如何用原生js和css制作轮播图

发表评论

评论列表（0条）