HTML5创意图文幻灯片切换.zip资源-CSDN文库

共5个文件

js：3个

html：1个

css：1个

版权申诉

jQuery特效

CSS特效

网页特效

191 浏览量 2023-10-10 23:44:09 上传评论收藏 29KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5创意图文幻灯片切换.zip （5个子文件）

jiaoben7751

CSSRulePlugin3.min.js 2KB

gsap-latest-beta.min.js 59KB

script.js 5KB

css

style.css 7KB

index.html 3KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML5创意图文幻灯片切换 - 更多源码【www.96flw.com】</title> <link rel="stylesheet" href="css/style.css"> </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="js/gsap-latest-beta.min.js"></script> <script src="js/CSSRulePlugin3.min.js"></script> <script src="js/script.js"></script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <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>

评论收藏

内容反馈

版权申诉