首页 » SEO优化 » 一个自用的好看幻灯片代码

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

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

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

代码:

  • <div class=“slideshow-container”><a href=”https://www.leyym.com”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://www.leyym.com”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://www.leyym.com”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>

未经允许不得转载:作者:leyun, 转载或复制请以 超链接形式 并注明出处 乐云源码
原文地址:《一个自用的好看幻灯片代码》 发布于2020-12-24

分享到:
赞(0) 生成海报

评论 抢沙发

6 + 1 =


长按图片转发给朋友

终身VIP会员仅需要99元
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册