写通用网页滚动图片代码像flash

抛弃flash滚动图片,因为为什么?时代在进步,技术不更新,真的没办法跟上网站建设主流。如今的你,可能都有一台苹果上网设备,如“MacBook、iPhone 和 iPad”,它不可否认给世界带来的影响有大。

今天易雅达李越将要分享的是一款插件,在过去,很多网页在windows系统上显示正常,但是如果有人是用苹果产品访问该网站,发现它不能兼容flash。

所以如下:

要适应Apple Mac 系统,那就写通用的网页代码,让所有的人访问无障碍。

第一步骤:

css样式表,插入这段代码:
/*index*/
.dbImg{width:960px;height:341px;position:relative;}
.dbImg ul{height:307px;}
.dbImg li{position:absolute;display:none}
.dbImg li img{display:block}
.jsNav{background:url(../images/index/bannerBg.jpg) repeat-x;height:34px; width:960px;}
.jsNavInner{position:absolute;right:23px;}
.jsNav a{display:block;float:left;width:7px;height:7px;margin-left:11px;
    background:url(../images/index/bannerIcon.jpg) no-repeat;text-indent:-9999px; line-height:0; margin-top:13px;}
.jsNav a.current{background:url(../images/index/bannerIconCurr.jpg) no-repeat;}


.clear{clear:both}
.clearfix:after{content:'\20';display:block;clear:both;visibility:hidden;line-height: 0;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}


第二步骤:

在想要展示动画滚动图片的地方,添加这部分代码。

<div class="dbImg">
        <ul id="portfolio" class="clearfix">
        
                 <li style="display:block"><a href="https://www.yiyada.com/"><img src='https://www.yiyada.com/wzjs/images/default/default_logo.png' width="960" height="307"/></a></li>
               
                 <li ><a href="#"><img src='/ImgUpload/Pictures/big/20110714150856.jpg' width="960" height="307"/></a></li>
               
                 <li ><a href="#"><img src='/ImgUpload/Pictures/big/20120516144958.jpg' width="960" height="307"/></a></li>
               
           
        </ul>

        <div class="jsNav">
            <div class="jsNavInner clearfix" id="jsNav" >
           
                 <a class="trigger current"  href="nojavascript...void(0)">1</a>
               
                 <a class="trigger"  href="nojavascript...void(0)">2</a>
               
                 <a class="trigger"  href="nojavascript...void(0)">3</a>
               
             
            </div>
        </div>

        <!--<div id="sorollDiv1" style="right:-126px;position:absolute; top:150px;z-index:1000;">
            <a href="/news/detail.aspx?ID=318"><img src="images/ban.png" /></a>
        </div>-->
    </div>


第三步骤:

在网站模板中加入这个代码

<script type="text/javascript" src="https://www.yiyada.com/tp/jquery-1.5.js"></script>
<script type="text/javascript" src="https://www.yiyada.com/tp/indexBanner.js"></script>
<script type="text/javascript">
    var $num = $("#jsNav a").length;
</script>
</body>
</html>

第四步骤:

更新你的网页,效果出来了。