利用jQuery实现锦云官网幻灯片切换



65 259 87



特效描述:利用jQuery实现 锦云官网 幻灯片切换,利用jQuery实现锦云官网幻灯片切换

代码结构

1. 引入CSS

<link href="css/intro.css" type="text/css"  rel="stylesheet"/>
<link href="css/intro.css" type="text/css"  rel="stylesheet"/>

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
 	$(document).ready(function(e) {
        $("#section-left-control,#section-right-control").bind({
			mouseenter:function(){
					$("#section-left-control,#section-right-control").fadeTo(200,1); 
				},
			mouseleave:function(){
					$("#section-left-control,#section-right-control").fadeTo(400,0.3); 
				}
			});
			var CURR = 1;
			var SIV = setInterval(function(){
				slideNext();
				},3000); 
			$("#main-content").mouseenter(function(){
					clearInterval(SIV); 
				}).mouseleave(function(){
					SIV = setInterval(function(){
						slideNext();
						},3000);
					});
			$("#section-right-control").click(function(){ 
					 slideNext();
				});
				$("#section-left-control").click(function(){ 
					slidePrevious();
				});
			function slideNext(){ 
					  if( CURR >= 3) CURR = 1;
					else CURR ++;
					 slideTo(CURR);
				}
			function slidePrevious(){
					if( CURR <= 1) CURR = 3;
					else CURR --;
					 slideTo(CURR);
				}
			function slideTo(c){
					if(c == 1) {
						$("#slidershow_list_02,#slidershow_list_03").removeClass("current");
						$("#slidershow_list_01").addClass("current"); 
						$("#slidershow_panel").animate({top:'0'},500);
						}  
						if(c == 2) {
						$("#slidershow_list_01,#slidershow_list_03").removeClass("current");
						$("#slidershow_list_02").addClass("current"); 
						$("#slidershow_panel").animate({top:'-470px'},500);
						}  
						if(c == 3) {
						$("#slidershow_list_01,#slidershow_list_02").removeClass("current");
						$("#slidershow_list_03").addClass("current"); 
						$("#slidershow_panel").animate({top:'-900px'},500);
						}  
				}
    });
</script>
</head>
<body id="bodywrap">
<br>
<div id="main-content">  
 	<div class="section-mask">  
                	<div class="section-picbox-content">
                    	<div class="section-left-list" style="display:absolute;z-index:9999;">
                        	<ul>
                            	<li id="slidershow_list_01" class="current" style="top:30px;">
                                	<div style="width:100%;height:100%;background:url(img/section-slidershow-glass.png) 18px -180px;"></div>
                                </li>
                                <li id="slidershow_list_02" style="top:180px;">
                                	<div style="width:100%;height:100%;background:url(img/section-slidershow-glass.png) -217px -180px;"></div>
                                </li>
                                <li id="slidershow_list_03"  style="top:330px;">
                                	<div style="width:100%;height:100%;background:url(img/section-slidershow-glass.png) -443px -180px;"></div>
                                </li>
                            </ul>
                        </div>
                        <div  class="section-right-pic" style="display:absolute;z-index:9999;">
                        	<div id="slidershow_panel">
                        		<img src="img/section_slidershow_pic_01.png" style="height:470px;width:720px;top:33px;float:left;" />
                            	<img src="img/section_slidershow_pic_02.png" style="height:470px;width:720px;top:33px;float:left;" />
                            	<img src="img/section_slidershow_pic_03.png" style="height:400px;width:720px;top:98px;float:left;" />
                            </div>
                        </div>
                    </div>
                    <div style="background:url(img/ad_bg_02.png) 50% 50% no-repeat;position:absolute;z-index:99;left:0;top:0;width:100%;height:100%;overflow:hidden;background-size:cover;"></div>
    	</div>
        <div class="section-control">
    	<a  id="section-left-control" class="control" ></a><a  id="section-right-control" class="control"></a>
    </div>
    	</div>
    </div> 
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 切换按钮 表单 焦点图 幻灯片 图片轮播 图片滑动 图片切换 图片轮播 全屏焦点图 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到