伪3D轮播图片切换特效-JS特效-爱易网页

伪3D轮播图片切换特效

日期：2014-05-18　浏览次数：20265 次

以下是程序代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html {background:#000}
body, ul {margin:0;padding:0}
li {list-style:none}
img {border:none;display:block}
.slide-wp {
width: 500px;
height: 300px;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
}
.nav-wp {
position: absolute;
background: #ccc;
top: 50%;
margin-top: 170px;
left: 50%;
margin-left: -100px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 0 20px 6px 10px;
_padding: 0 20px 2px 10px;
}
.nav li {
float: left;
margin-left: 10px;
font-size: 20px;
font-weight: bold;
font-family: tahoma;
color: #22739e;
cursor: pointer;
height: 22px;
}
.nav li.cur{color: #ff7a00}
.next {
position:absolute;
top: 0;
left: 160px;
padding: 4px 8px;
color: #ff7a00;
background: #ccc;
height: 20px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈。。。</h2>
<div id="slider" class="slide-wp">
<ul>
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg"  alt="" /></a></li>
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg"  alt="" /></a></li>
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg"  alt="" /></a></li>
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg"  alt="" /></a></li>
<li><a href="http://www.cnblogs.com/hongru/" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg"  alt="" /></a></li>
</ul>
</div>
<div class="nav-wp">
<ul id="nav" class="nav">
<li onclick="mySlider.pos(0)">●</li>
<li onclick="mySlider.pos(1)">●</li>
<li onclick="mySlider.pos(2)">●</li>
<li onclick="mySlider.pos(3)">●</li>
<li onclick="mySlider.pos(4)">●</li>
</ul>
<a class="next" onclick="mySlider.move()">next</a>
</div>
<script type="text/javascript">
var HR = {
 $ : function(i) {return document.getElementById(i)},
 $$ : function(c, p) {return p.getElementsByTagName(c)},
 ce : function(i, t) {
  var o = document.createElement(i);
  t.appendChild(o);
  return o;
 }
};
HR.slider3D = function () {
 var init = function (o) {
  this.o = o;
  var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul);
  this.l = li.length;
  this.w = wp.offsetWidth;
  this.h = wp.offsetHeight;
  this.at = o.auto? o.auto : 4;
  var con = this.con = HR.ce('div', wp);
  con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px';
  ul.style['display'] = 'none';  
  this.a1 = HR.ce('a', con);  
  this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';  
  this.a2 = HR.ce('a'</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="1148">下一篇：js焦点图切换广告代码</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16167' title='Kindle入华遭遇国内厂商“围剿 ” 电信也参战' target="_blank">
                        Kindle入华遭遇国内厂商“围剿 ” 电信也参战</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10809' title='阿里马云：我觉得互联网还有十年可以做 ' target="_blank">
                        阿里马云：我觉得互联网还有十年可以做 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10846' title='机器人进一步取代人类：将进军白领任务' target="_blank">
                        机器人进一步取代人类：将进军白领任务</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34357' title='国美痛批网购七宗罪 用短暂盈利输了未来' target="_blank">
                        国美痛批网购七宗罪 用短暂盈利输了未来</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16165' title='网络文学竞争白热化 百度多酷文学网上线' target="_blank">
                        网络文学竞争白热化 百度多酷文学网上线</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34335' title='杨元庆去年总薪酬1.33亿元' target="_blank">
                        杨元庆去年总薪酬1.33亿元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34127' title='三星手机在国内陷入困境：华为中兴小米紧追' target="_blank">
                        三星手机在国内陷入困境：华为中兴小米紧追</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34354' title='中国邮政与阿里合作：邮政网点可做网购自提点' target="_blank">
                        中国邮政与阿里合作：邮政网点可做网购自提点</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/400' title='全球网络遭史上最大规模攻击：攻击数据每秒300G' target="_blank">
                        全球网络遭史上最大规模攻击：攻击数据每秒300G</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：312人　
        网站在4时12分8秒内访问总人数：63191人
    当前 50.05%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>