jquery+switchPage实现全屏鼠标滚动分页幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery+switchPage实现全屏鼠标滚动分页幻灯片效果代码
代码标签: jquery switchPage 全屏 鼠标 滚动 分页 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> h1,body,html { padding: 0; margin: 0 } html,body { height: 100%; overflow: hidden } h1 { font-size: 2em; font-weight: normal } p { font-size: 1em; margin: .5em 0 2em 0 } #container,.section { height: 100%; position: relative } #section0,#section1,#section2,#section3 { background-color: #000; background-size: cover; background-position: 50% 50% } #section0 { background-color: #024BCE; color: #fff; text-shadow: 1px 1px 1px #333 } #section1 { color: #fff; text-shadow: 1px 1px 1px #333; background-color: #31B81D } #section2 { background-color: #01B5F0; color: #fff; text-shadow: 1px 1px 1px #666 } #section3 { color: #008283; background-color: #5D0FF1; text-shadow: 1px 1px 1px #fff } #section0 p { color: #F1FF00 } #section3 p { color: #00A3AF } .left { float: left } .intro { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center } #pages { position: fixed; right: 10px; top: 50%; list-style: none } #pages li { width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 0 0 10px 5px } #pages li.active { width: 14px; height: 14px; border: 2px solid #FFFE00; background: 0; margin-left: 0 } #section0 .title { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-animation: sectitle0 1s ease-in-out 100ms forwards; animation: sectitle0 1s ease-in-out 100ms forwards } #section0 p { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-animation: sec0 1s ease-in-out 100ms.........完整代码请登录后点击上方下载按钮下载查看
网友评论0