js实现图片循环显示

最新推荐文章于 2023-04-10 11:30:40 发布

weixin_30902251

最新推荐文章于 2023-04-10 11:30:40 发布

阅读量872

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/m-xy/archive/2013/01/24/2874662.html

版权

部分代码的用途我还不是很清楚

View Code

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4 <!--
  5 <link href="CSS/login.css" type=text/css rel=stylesheet></link>
  6 -->
  7 
  8 
  9 <title>欢迎您</title>
 10 <style type="text/css">
 11 <!--
 12 body {
 13     background-color:#CC0000;
 14     background-image: url(Img/tou2.jpg);
 15         
 16 }
 17 .STYLE2 {font-size: large}
 18 .STYLE16 {color: #dddddd}
 19 .STYLE17 {color: #0000CC}
 20 .STYLE18 {color: #330000}
 21 .STYLE19 {color: #FF9933}
 22 .STYLE20 {font-family: Arial, Helvetica, sans-serif}
 23 .STYLE21 {color: #FFFFFF}
 24 .STYLE22 {color: #FF0000}
 25 -->
 26 </style>
 27 <style type="text/css">
 28 *{margin:0;padding:0;}
 29 body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#990100;}
 30 .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
 31 .clearfix{zoom:1;}
 32 ul,li{list-style:none;}
 33 img{border:0;}
 34 .wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
 35 h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
 36 /* focus */
 37 #focus{width:800px;height:280px;overflow:hidden;position:relative;}
 38 #focus ul{height:380px;position:absolute;}
 39 #focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#990100;}
 40 #focus ul li div{position:absolute;overflow:hidden;}
 41 #focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
 42 #focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
 43 #focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
 44 #focus .btn span.on{background:#fff;}
 45 #focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;}
 46 #focus .pre{left:0;}
 47 #focus .next{right:0;background-position:right top;}
 48 </style>
 49 <script type="text/javascript" src="JS/jquery-1.8.3.js"></script>
 50 <script type="text/javascript">
 51 $(function() {
 52     var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
 53     var len = $("#focus ul li").length; //获取焦点图个数
 54     var index = 0;
 55     var picTimer;
 56     
 57     //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
 58     var btn = "<div class='btnBg'></div><div class='btn'>";
 59     for(var i=0; i < len; i++) {
 60         btn += "<span></span>";
 61     }
 62     btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
 63     $("#focus").append(btn);
 64     $("#focus .btnBg").css("opacity",0.5);
 65 
 66     //为小按钮添加鼠标滑入事件，以显示相应的内容
 67     $("#focus .btn span").css("opacity",0.4).mouseover(function() {
 68         index = $("#focus .btn span").index(this);
 69         showPics(index);
 70     }).eq(0).trigger("mouseover");
 71 
 72     //上一页、下一页按钮透明度处理
 73     $("#focus .preNext").css("opacity",0.2).hover(function() {
 74         $(this).stop(true,false).animate({"opacity":"0.5"},300);
 75     },function() {
 76         $(this).stop(true,false).animate({"opacity":"0.2"},300);
 77     });
 78 
 79     //上一页按钮
 80     $("#focus .pre").click(function() {
 81         index -= 1;
 82         if(index == -1) {index = len - 1;}
 83         showPics(index);
 84     });
 85 
 86     //下一页按钮
 87     $("#focus .next").click(function() {
 88         index += 1;
 89         if(index == len) {index = 0;}
 90         showPics(index);
 91     });
 92 
 93     //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
 94     $("#focus ul").css("width",sWidth * (len));
 95     
 96     //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
 97     $("#focus").hover(function() {
 98         clearInterval(picTimer);
 99     },function() {
100         picTimer = setInterval(function() {
101             showPics(index);
102             index++;
103             if(index == len) {index = 0;}
104         },4000); //此4000代表自动播放的间隔，单位：毫秒
105     }).trigger("mouseleave");
106     
107     //显示图片函数，根据接收的index值显示相应的内容
108     function showPics(index) { //普通切换
109         var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
110         $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
111         //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
112         $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
113     }
114 });
115 
116 </script>
117 </head>
118 
119 <body οnlοad="zidong.click()" background="Img/bg1.jpg">
120 <div align="center"><span class="STYLE22">
121   </span><br/>
122 <img src="Img/bg1.jpg" />
123 <br/><br/>
124 <table width="60%" border="0" align="center">
125   <tr>
126     <td width="15%"><div align="center" class="STYLE16"><a href="login.html" class="STYLE21"><span class="STYLE2">aa</span></a></div></td>
127     <td width="15%"><div align="center" class="STYLE16"><a href="buy_introductions.html" class="STYLE21"><span class="STYLE2">bb</span></a></div></td>
128     <td width="15%"><div align="center" class="STYLE18"><a href="lottery_rules.html" class="STYLE21"><span class="STYLE2">cc</span></a></div></td>
129     <td width="15%"><div align="center" class="STYLE17"><a href="login.jsp" class="STYLE21" ><span class="STYLE2">dd</span></a></div></td>
130     <td width="15%"><div align="center" class="STYLE17"><a href="regist.jsp" class="STYLE21"><span class="STYLE2">ee</span></a></div></td>
131     <td width="15%"><div align="center" class="STYLE19"><a href="superuser.jsp" class="STYLE21"><span class="STYLE2">ff</span></a></div></td>   
132 </table>
133 <br/>
134 <div class="wrapper">    
135         <div id="focus">
136             <ul>
137                 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_1.jpg" alt="QQ商城焦点图效果下载" /></a></li>
138                 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_2.jpg" alt="QQ商城焦点图效果教程" /></a></li>
139                 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_3.jpg" alt="jquery商城焦点图效果" /></a></li>
140                 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_4.jpg" alt="jquery商城焦点图代码" /></a></li>
141                 <li><a href="http://www.baidu.com/" target="_blank"><img src="image/new_5.jpg" alt="jquery商城焦点图源码" /></a></li>
142             </ul>
143         </div>    
144     </div>
145 <br/>
146 <div align="center"><strong>XXX@版权所有@2013</strong></div>
147 </body>
148 </html>

转载于:https://www.cnblogs.com/m-xy/archive/2013/01/24/2874662.html

weixin_30902251

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现图片循环显示

部分代码的用途我还不是很清楚View Code 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <!-- 5...
复制链接

扫一扫