原生js图片轮播切换代码.zip资源-CSDN文库

共7个文件

png：4个

html：1个

js：1个

版权申诉

jQuery特效

CSS特效

网页特效

5星 · 超过95%的资源 134 浏览量 2023-10-15 00:04:50 上传评论收藏 53KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

原生js图片轮播切换代码.zip （7个子文件）

jiaoben7257

lb.js 6KB

lb.css 2KB

index.html 2KB

images

t2.png 13KB

t4.png 18KB

t3.png 16KB

t1.png 8KB

<!DOCTYPE HTML> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生js图片轮播切换代码 - 【更多源码：www.96flw.com】</title> <link rel="stylesheet" href="lb.css"> <script src="lb.js"></script> <script> window.onload = function () { // 轮播选项 const options = { id: 'lb-1', // 轮播盒ID speed: 600, // 轮播速度(ms) delay: 3000, // 轮播延迟(ms) direction: 'left', // 图片滑动方向 moniterKeyEvent: true, // 是否监听键盘事件 moniterTouchEvent: true // 是否监听屏幕滑动事件 } const lb = new Lb(options); lb.start(); } </script> </head> <body> <div class="lb-box" id="lb-1">  <div class="lb-content"> <div class="lb-item active"> <a href="#"> <img src="images/t1.png" alt="picture loss"> <span>Description 1</span> </a> </div> <div class="lb-item"> <a href="#"> <img src="images/t2.png" alt="picture loss"> <span>Description 2</span> </a> </div> <div class="lb-item"> <a href="#"> <img src="images/t3.png" alt="picture loss"> <span>Description 3</span> </a> </div> <div class="lb-item"> <a href="#"> <img src="images/t4.png" alt="picture loss"> <span>Description 4</span> </a> </div> </div>  <ol class="lb-sign"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ol>  <div class="lb-ctrl left">＜</div> <div class="lb-ctrl right">＞</div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉