JS实现头条新闻的经典轮播图效果示例
(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )
本文实例讲述了JS实现头条新闻的经典轮播图效果。分享给大家供大家参考,具体如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; padding:0; list-style: none; } .box{ width: 665px; height: 362px; border: solid; margin: 100px auto; position:relative ; } .left{ width: 50px; height: 50px; border: solid white; border-radius: 50%; position: absolute; line-height: 50px; text-align: center; font-size: 50px; left:0px; top:180px; cursor: pointer; color: white; } .right { width: 50px; height: 50px; border: solid white; border-radius: 50%; position: absolute; line-height: 50px; text-align: center; font-size: 50px; right: 0px; top: 180px; cursor: pointer; color: white; } ul{ width: 400px; height: 50px; margin:307px 188px; position: absolute; left:30px; top:24px; } li{ width: 30px; height: 30px; border: solid 1px white; border-radius: 50%; float: left; cursor: pointer; line-height: 30px; text-align: center; color: white; } img{ display: none; width: 665px; height: 362px; } .act{display: block; } .active{ background: black; } </style> </head> <body> <div class="box" id="box"> <img src="/UploadFiles/2021-04-02/1.jpg">本机测试运行效果如下:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
下一篇:AJAX在JQuery中的应用详解