一个自用的好看幻灯片代码,代码又是扒的扒的，来源不重要哈哈哈，样式就是首页有广告的那个幻灯片，分享给大家，代码有html,js,css全部丢一起就可以显示了，代码压缩了一下，自己看看该改哪里吧。
使用环境html就行了，begin主题把代码放到主题选项里面的广告位头部通栏广告位第一个里面即可。
代码:
1 2 | <div class="slideshow-container"><a href="#"rel="external nofollow"><div class="mymom fade"><div class="numbertext">广告</div><img src="https://ae01.alicdn.com/kf/H2e7e835c3c1d4f169c4227e9fa5dcebfB.jpg"style="width:100%"><div class="momtext">广告</div></div></a><a href="#"rel="external nofollow"><div class="mymom fade"><div class="numbertext">广告</div><img src="https://ae01.alicdn.com/kf/Hb38733c403e44e99bce24d253262e936Q.jpg"style="width:100%"><div class="momtext">广告</div></div></a><div class="mymom fade"><div class="numbertext">美图</div><img src="#"style="width:100%"><div class="momtext"></div></div></div><div style="text-align:center"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div><style>.mymom{display:none}.slideshow-container{max-width:100%;position:relative;margin:auto;}.slideshow-container img{height:280px;}.prev,.next{cursor:pointer;position:absolute;top:50%;width:auto;margin-top:-22px;padding:16px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:0 3px 3px 0;}.next{right:0;border-radius:3px 0 0 3px;}.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8);}.momtext{color:#f2f2f2;font-size:20px;padding:10%;position:absolute;width:100%;text-align:center;}.numbertext{color:#f2f2f2;font-size:20px;padding:8px 12px;position:absolute;top:0;background-color:#619d62;border-radius:5px 0px 0px 0px;}.dot{height:10px;width:33%;background-color:#e1d9d9;display:inline-block;transition:background-color 0.6s ease;}.active,.dot:hover{background-color:#717171;}.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;}@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}</style> <script>var slideIndex=0;showSlides();function showSlides(){var i;var slides=document.getElementsByClassName("mymom");var dots=document.getElementsByClassName("dot");for(i=0;i<slides.length;i++){slides[i].style.display="none"}slideIndex++;if(slideIndex>slides.length){slideIndex=1}for(i=0;i<dots.length;i++){dots[i].className=dots[i].className.replace(" active","")}slides[slideIndex-1].style.display="block";dots[slideIndex-1].className+=" active";setTimeout(showSlides,5000)}</script> |