如何修复我的幻灯片,它可以继续加载而不在Android上显示图片

时间:2018-09-08 04:18:01

标签: css mobile opera-mini

enter image description here

这是代码:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script language="javascript">'use strict';$(function() {var width = 720; var animationSpeed = 2500; var pause = 5000; var currentSlide = 1;var $sdr2337 = $('#sdr2337'); var $slideContainer = $('.sld', $sdr2337); var $sld = $('.slide', $sdr2337); var interval; function startsdr2337() { interval = setInterval(function() { $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {if (++currentSlide === $sld.length) {currentSlide = 1; $slideContainer.css('margin-left', 0); }});}, pause);} function pausesdr2337() {clearInterval(interval);}$slideContainer.on('mouseenter', pausesdr2337).on('mouseleave', startsdr2337);startsdr2337();});</script><div style="width: 720px; margin: 0 auto;"><div style="position: relative; width: 720px; "><style type="text/css">#gpoy {position: absolute; right:-168px; top:3px; padding: 8px 0px 3px; z-index:99; opacity: 0.9; transition: 1s;  line-height: 12px;}.repper {width: 726px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 20px; box-shadow: 7px 7px 9px #888888 ;}.repper:hover #gpoy {transition: 2s; right:23px; }</style><div class="repper"><div id="gpoy"><a style="font-weight: normal;  text-shadow: 1px 1px #555555; color: #FFFFFF; text-decoration:none; font-size: 8pt; line-height:10px; font-family: arial;" href="http://www.123-slideshow.com" target="_blank">&#127817; CSS3 Slider</a></div><style type="text/css">#sdr2337 {width: 720px; height: 400px; border: 3px solid #FFFFFF; border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; }#sdr2337 .sld {width: 2880px; height: 400px;  display: block; margin: 0; padding: 0;}#sdr2337 .slide {width: 720px; height: 400px; float: left; list-style-type: none;}.DOT180906 {position: absolute; max-width: 720px; margin: 0px;}.c128165  {position: absolute; bottom: 0px; width:100%;  padding: 12px; background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF; font-size:24pt; font-family:Tahoma; text-align:center; line-height:48px; z-index:33; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}</style>

<div id="sdr2337">
<ul class="sld">

<li class="slide slide1">
 <figure class="DOT180906">
  <img src="https://3.bp.blogspot.com/-Z5b_SCr5Nck/W44VsqizSHI/AAAAAAAACas/GC6fdSiHFbYprgCByBGqiFQjVaG15mEqQCLcBGAs/s1600/images%25286%2529.jpg" />
 <figcaption class="c128165">
The attitude of Failure
</figcaption> 
 </figure>
 </li>

<li class="slide slide2">
 <figure class="DOT180906">
 <a href="http://#" target="_blank"> <img src="123-slideshow/knowledge.png" />
 <figcaption class="c128165">
Knowledge
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide3">
 <figure class="DOT180906">
 <a href="http://#" target="_blank"> <img src="123-slideshow/the-best-way-to-save.jpg" />
 <figcaption class="c128165">
The best way to save
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide1">
 <figure class="DOT180906">
  <img src="123-slideshow/the-attitude-of-failure.jpg" />
 <figcaption class="c128165">
The attitude of Failure
</figcaption> 
 </figure>
 </li>

</ul></div></div></div>
</div>

1 个答案:

答案 0 :(得分:0)

我找到了问题的答案,如果以后有人遇到同样的问题,我也愿意分享。 我将提供的信息包括: 网站名称-www.knowseeker.com 平台博客 模板自定义

现在,上面的滑块代码应该可以在任何html小部件中使用。真正的问题是我插入了它。 [如果您是该主题的新手,请搜索有关如何使用css和js编写滑块编码的教程。] sorella模板为我的模板提供的滑块小部件已配置为根据您提供的标签显示指向我的帖子的幻灯片。

默认字段包含以下各项:5 / Fashion / slider,表示(要显示的帖子幻灯片数)/(要显示的帖子标签)/(滑块,以唤起脚本)

因此您无需在此处插入任何代码。只需输入上面我提供的格式即可恢复为默认代码,您已经替换了代码。使用所需的任何标签,并确保所需的帖子也具有该标签。