<template> <div> <div> <div> <div></div> </div> </div> </div> </template> <script> import "jQuery"; import "@/static/js/postercarousel"; export default { data() { return {}; }, mounted() { this.initposter(); console.log(postercarousel); 21 }, methods: { initposter() { var postercarousel = new postercarousel( "postercarousel", { className: "postercarousel" }, [ { // img: require("../assets/callme.png"), img: 'http://occe.ospc.cn/upload/2016-01-18/145309107223576.jpg', // url: "http://www.htmleaf.com/" }, { // img: require("../assets/liaojiewaibao.png"), img: "http://occe.ospc.cn/upload/2016-01-17/145302166917282.jpg", // url: "http://www.htmleaf.com/" }, { img: require("../assets/ruhui.png"), img: "http://occe.ospc.cn/upload/2016-01-17/14530216405007.png", // url: "http://www.htmleaf.com/" }, { // img: require("../assets/callme.png"), img: "http://occe.ospc.cn/upload/2016-01-18/145309108911041.jpg", // url: "http://www.htmleaf.com/" }, ] ); } } }; </script> <style lang="scss"> .broadcast { /* postercarousel */ #postercarousel { width: 100% !important; height: 450px; } .postercarousel { position: relative; height: 100%; width: 100% !important; } .postercarousel img { max-width: 100%; max-height: 100%; border: 0 none; background: #888; display: block; } .postercarousel .contentHolder { position: relative; overflow: hidden; } .postercarousel .contentHolderUnit { cursor: pointer; position: absolute; width: 83% !important; height: 450px; } .postercarousel .contentHolderUnit a.elementLink { display: block; overflow: hidden; z-index: 3; position: absolute; left: 0; right: 0; width: 100%; height: 100%; } .postercarousel .contentHolderUnit img { width: 100%; height: 100%; display: block; } .postercarousel .contentHolderUnit .elementTitle { } .postercarousel .contentHolderUnit .elementOverlay { z-index: 1; position: absolute; top: 0; left: 0; background: #000; width: 100%; height: 100%; opacity: 0; filter: opacity=0; } .postercarousel .contentHolderUnit .leftShadow { position: absolute; top: 23px; left:-250px; // width: 250px; height:327px; background: url("../assets/images/leftShadow.png") no-repeat; background-size: contain; } .postercarousel .contentHolderUnit .rightShadow { position: absolute; top: 23px; right:134px; height: 327px; background: url("../assets/images/rightShadow.png") no-repeat; background-size: contain; } .postercarousel .bannerControls { } .postercarousel .leftNav, .postercarousel .rightNav { cursor: pointer; z-index: 10; position: absolute; top: 60%; width: 45px; height: 45px; margin-top: -43px; } .postercarousel .leftNav { left: 7px; background: url("../assets/images/1.png") no-repeat; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_prev_btn.png"); } .postercarousel .rightNav { right: 7px; background: url("../assets/images/2.png") no-repeat; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@/assets/images/slide_next_btn.png"); } .postercarousel .leftNav:hover { } .postercarousel .rightNav:hover { } .postercarousel .bottomNav { z-index: 140; position: absolute; width: 100%; height: 10px; margin-top: 400px; padding: 10px 0 0; text-align: center; } .postercarousel .bottomNavButtonOFF { cursor: pointer; overflow: hidden; display: inline-block; *display: inline; *zoom: 1; width: 10px; height: 10px; margin: 0 5px; vertical-align: top; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #c3c3c3; } .postercarousel .bottomNavButtonOFF:hover { background: #aaa; } .postercarousel .bottomNavButtonON, .postercarousel .bottomNavButtonON:hover { background: #69aaec; } .postercarousel .bottomNavLeft { } .postercarousel .bottomNavRight { } } </style>
总结