自己写的简单明了的幻灯切换效果 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5     <style type="text/css">
  6 
  7         *{
  8             margin: 0px;
  9             padding: 0px;
 10             color:#333;
 11         }
 12         .slide-box{
 13             width:600px;
 14             height:300px;
 15             position: relative;
 16             overflow:hidden;
 17         }
 18         .image-box{
 19             width:99999px;
 20             position:absolute;
 21         }
 22         .image-box li{
 23             display:block;
 24             width:600px;
 25             height:300px;
 26             float:left;
 27             background: #9cc;
 28             position:relative;
 29         }
 30         .image-box li p{
 31             width:100%;
 32             height:40px;
 33             padding:0 10px;
 34             line-height:40px;
 35             position:absolute;
 36             bottom:0px;
 37             color:#fff;
 38             background:rgba(0,0,0,.4);
 39             filter:alpha(opacity=50);
 40         }
 41         .slide-box .tip{
 42             position:absolute;
 43             right:20px;
 44             bottom:10px;
 45             z-index:999;
 46         }
 47         .slide-box .tip li{
 48             display:block;
 49             width:20px;
 50             width:20px;
 51             line-height:20px;
 52             float: left;
 53             margin-left:10px;
 54             background:rgba(0,0,0,.4);
 55             filter:alpha(opacity=50);
 56             text-align:center;
 57             border-radius: 20px;
 58         }
 59         .slide-box span{
 60             color:#fff;
 61             cursor:pointer;
 62         }
 63         .slide-box .tip .active{
 64             background:#f60;
 65         }
 66 
 67     </style>
 68     <script type="text/javascript" src="../jsunit/app/jsUnitCore.js"></script>
 69     <script type="text/javascript" src="./js/jquery.js"></script>
 70     <script type="text/javascript">
 71         //封装成的方法
 72         function slideShow($obj){
 73             var $imageBox =  $obj.find(".image-box");
 74             var $imageTip = $obj.find(".tip");
 75             var boxWidth = $obj.find('.image-box').width();
 76             var itemWith = $obj.find('.image-box li').width();
 77             var itemCount = $obj.find('.image-box li').length;
 78             var index = 0;
 79 
 80             //自动切换方法
 81             function autoMove(){
 82                 if(!$imageBox.is(':animated')){
 83                     if(index == (itemCount-1)){
 84                         index = 0;
 85                         $imageBox.stop().animate({left:0},changeStatus());
 86                     }else{
 87                         index ++;
 88                         $imageBox.stop().animate({left:'-='+itemWith},changeStatus());
 89                     }
 90                 }
 91             }
 92 
 93             //状态切换
 94             function changeStatus(){
 95                 $imageTip.children().eq(index).addClass('active').siblings().removeClass('active');
 96             }
 97 
 98             //点击切换
 99             $('.slide-box .tip span').click(function(){
100                 index = parseInt($(this).html()) -1;
101                 $imageBox.stop().animate({left:-index*itemWith},changeStatus());
102             })
103             //开启自动切换
104             setInterval(autoMove,5000);
105         }
106         $(function(){
107             slideShow($('.slide-box'));
108         })
109     </script>
110 </head>
111 <body>
112     <div class="slide-wrap">
113         <div class="slide-box">
114             <ul class="image-box">
115                 <li><a href="javascript:"><img src="./images/1.jpg" alt="" /><p>nihsoa</p></a></li>
116                 <li><a href="#"><img src="./images/2.jpg" alt="" /><p>nihsoa</p></a></li>
117                 <li><a href="#"><img src="./images/3.jpg" alt="" /><p>nihsoa</p></a></li>
118                 <li><a href="#"><img src="./images/4.jpg" alt="" /><p>nihsoa</p></a></li>
119                 <li><a href="#"><img src="./images/1.jpg" alt="" /><p>nihsoa</p></a></li>
120             </ul>
121             <ul class="tip">
122                 <li class="active"><span>1</span></li>
123                 <li><span>2</span></li>
124                 <li><span>3</span></li>
125                 <li><span>4</span></li>
126                 <li><span>5</span></li>
127             </ul>
128         </div>
129     </div>
130 </body>
131 </html>

 

posted @ 2013-01-10 11:23  linksgo2011  阅读(149)  评论(0)    收藏  举报