仿DNF论坛


  • 中国传统文化&DNF
  • 春节活动汇聚
  • 2019新春礼包
  • 春节内容抢先看
  • 春节版本活动和商城
  • 1
  • 2
  • 3
  • 4
  • 5
代码
<style>
.ex-slide .slide-prev, .ex-slide .slide-next{top: 100px;}
.ex-slide .slide-next{right: 0px;}
.ex-slide .slide-prev a, .ex-slide .slide-next a{display: block; width: 26px; height: 100px;}
.ex-slide .slide-prev a{background:url(https://dnf.gamebbs.qq.com/template/acgi_ax0/images/slider_btn_prev.png) no-repeat;}
.ex-slide .slide-prev a:hover{background-position:0 -100px;}
.ex-slide .slide-next a{background:url(https://dnf.gamebbs.qq.com/template/acgi_ax0/images/slider_btn_next.png) no-repeat;}
.ex-slide .slide-next a:hover{background-position:0 -100px;}
.focus-box{top: 5px; left: 4px;}
.focus-box li{float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer;}
.focus-box li{background: rgba(0,0,0,0.3); color: #FFF; overflow: hidden;}
.focus-box li.on{background: rgba(255,255,255,0.5); color: #000; font-weight: 700;}
.ex-slide ul.focus-bg li span.title{position:absolute;bottom:0;left:0;margin-bottom:0;width:100%;height:32px;line-height:32px;font-size:14px;text-indent:10px;color: #FFF; overflow: hidden; text-align: center; padding: 0; background: url(https://dnf.gamebbs.qq.com/template/acgi_ax0/images/black_so32.png) repeat-x; text-shadow: 0 -1px 1px rgba(0,0,0,.25);animation: fastr20 0.5s; -webkit-animation: fastr20 0.5s; -moz-animation: fastr20 0.5s;}

@keyframes fastr20{0%{opacity:0;transform:translate(0,20px);}100%{opacity:1;transform:translate(0,0);}}
@-webkit-keyframes fastr20{0%{opacity:0;-webkit-transform:translate(0,20px);}100%{opacity:1;-webkit-transform:translate(0,0);}}
@-moz-keyframes fastr20{0%{opacity:0;-moz-transform:translate(0,20px);}100%{opacity:1;-moz-transform:translate(0,0);}}

.ex-slide{width: 550px; height: 320px;}
.ex-slide ul.focus-bg li{width: 550px; height: 320px;}
.ex-slide ul.focus-bg img{width: 100%; height: 100%;}
</style>

<!--幻灯片-->
<div id="slide" class="ex-slide">
	<!--背景大图-->
	<ul class="focus-bg">
		<li>
			<a href="javascript:;" target="_blank">
				<img src="https://p.qpic.cn/dnfbbspic/0/dnfbbs_dnfbbs_dnf_gamebbs_qq_com_forum_201901_18_153923qoam7pscpdp30d0c.jpg/0"/>
			</a>
			<span class="title">中国传统文化&DNF</span>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="https://p.qpic.cn/dnfbbspic/0/dnfbbs_dnfbbs_dnf_gamebbs_qq_com_forum_201901_18_172358z0hswxwnueuhhs3j.jpg/0"/>
			</a>
			<span class="title">春节活动汇聚</span>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="https://p.qpic.cn/dnfbbspic/0/dnfbbs_dnfbbs_dnf_gamebbs_qq_com_forum_201901_08_171929iraq5sjgp9rz5djq.png/0"/>
			</a>
			<span class="title">2019新春礼包</span>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="https://p.qpic.cn/dnfbbspic/0/dnfbbs_dnfbbs_dnf_gamebbs_qq_com_forum_201812_21_211026i565i565a54cj2nf.jpg/0"/>
			</a>
			<span class="title">春节内容抢先看</span>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="https://p.qpic.cn/dnfbbspic/0/dnfbbs_dnfbbs_dnf_gamebbs_qq_com_forum_201812_29_192137zkigohhk4zrilthb.jpg/0"/>
			</a>
			<span class="title">春节版本活动和商城</span>
		</li>
	</ul>

	<!--左右切换,如果不需要左右箭头切换的话,直接去掉这个div即可-->
	<div class="slide-prev-next">
		<!--上一张-->
		<div class="slide-prev"><a href="javascript:;"></a></div>
		<!--下一张-->
		<div class="slide-next"><a href="javascript:;"></a></div>
	</div>

	<!--焦点,如果不需要焦点的话,直接去掉这个div即可-->
	<div class="focus-box">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</div>

<script>
	javaex.slide({
		id : "slide",
		effect : "smooth"
	});
</script>