一个自用的好看幻灯片代码

诗梦
401
文章
717
评论
2019年10月29日13:11:54 2 3,511 次浏览 2492字

九一八,铭记历史,勿忘国耻,珍爱和平,振兴中华

请不要乱刷新多次本站,不然你有可能进入120秒的小黑屋!

一个自用的好看幻灯片代码,代码又是扒的扒的,来源不重要哈哈哈,样式就是首页那个有广告的那个幻灯片,个人看还可以就是我没有那种宽图还有就是广告图就这样没办法改了,分享给大家,代码有css,html,js全部丢一起就可以显示了,代码压缩了一下,自己看看该改哪里吧。一个自用的好看幻灯片代码

使用环境html就行了,begin主题把代码放到主题选项里面的广告位头部通栏广告位第一个里面即可。

代码:

  1. <div class="slideshow-container"><a href="https://m.mom1.cn/y0gxzs"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="https://m.mom1.cn/y0gxzs"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="https://cdn.mom1.cn/?mom=302"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>
  2. <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>
  • 版权声明: 发表于 2019年10月29日13:11:54
  • 转载注明:https://www.mom1.cn/6364.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  2   博主  0
    • avatar 001手游游戏网 @回复 0

      感谢分析,挺好看的,收藏了

      • avatar patebeng @回复 1

        胜多负少