JS大气网站主页幻灯片切换代码.zip资源-CSDN文库

共5个文件

js：3个

html：1个

css：1个

网页特效

jQuery特效

CSS特效

JavaScript特效

85 浏览量 2023-10-05 23:33:34 上传评论收藏 30KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

JS大气网站主页幻灯片切换代码.zip （5个子文件）

jiaoben8789

style.css 6KB

CSSRulePlugin3.min.js 2KB

gsap-latest-beta.min.js 63KB

css

index.html 3KB

script.js 5KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - Image slider with multiple controls and mobile swipe control (Javascript)</title> <link rel="stylesheet" href="style.css"> </head> <body> <html lang="en"> <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"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <title>Slider</title> </head> <body> <div class="container"> <div class="slider"> <div class="box1 box"> <div class="bg"></div> <div class="details"> <h1>I'm the first Box</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus. Donec scelerisque ipsum diam, ac mattis orci pellentesque eget. </p> <button>Check Now</button> </div> <div class="illustration"><div class="inner"></div></div> </div> <div class="box2 box"> <div class="bg"></div> <div class="details"> <h1>I'm the second Box</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus. Donec scelerisque ipsum diam, ac mattis orci pellentesque eget. </p> <button>Check Now</button> </div> <div class="illustration"><div class="inner"></div></div> </div> <div class="box3 box"> <div class="bg"></div> <div class="details"> <h1>I'm the third Box</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus. Donec scelerisque ipsum diam, ac mattis orci pellentesque eget. </p> <button>Check Now</button> </div> <div class="illustration"><div class="inner"></div></div> </div> <div class="box4 box"> <div class="bg"></div> <div class="details"> <h1>I'm the fourth Box</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus. Donec scelerisque ipsum diam, ac mattis orci pellentesque eget. </p> <button>Check Now</button> </div> <div class="illustration"><div class="inner"></div></div> </div> <div class="box5 box"> <div class="bg"></div> <div class="details"> <h1>I'm the fifth Box</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus. Donec scelerisque ipsum diam, ac mattis orci pellentesque eget. </p> <button>Check Now</button> </div> <div class="illustration"><div class="inner"></div></div> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" class="prev" width="56.898" height="91" viewBox="0 0 56.898 91"><path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(0 91) rotate(-90)" fill="#fff"></svg> <svg xmlns="http://www.w3.org/2000/svg" class="next" width="56.898" height="91" viewBox="0 0 56.898 91"><path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(56.898) rotate(90)" fill="#fff"></svg> <div class="trail"> <div class="box1 active">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> </div> </div> <script src="gsap-latest-beta.min.js"></script> <script src="CSSRulePlugin3.min.js"></script> <script src="script.js"></script> </body> </html> <script src="./script.js"></script> </body> </html>

评论收藏

内容反馈