写了一个jquery循环幻灯片

xpsharp

浏览: 146803 次

最近访客更多访客>>

zhao103804

jie191576208

ttcpu

fxtxz2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

自己写的一个jquery循环幻灯片，代码有冗余，或大家有更好的方法，欢迎指证或建议！

common.js

$(function(){
	var num = 0;
	$(".pic_img").html($("ul.imgs li").eq(0).children("img").clone().fadeIn(1000));
	$("div.title").html($("ul.imgs li").eq(0).children("p").clone().fadeIn(1000));
	$("ul.change_bt li").bind("click",function(){
		if($(".pic_img img").is(":animated")){
			return;
		}
		
		var order = $(this).attr("value");
		num = order-1;
		$(".pic_img").find("li").fadeOut(500).end().html($("ul.imgs li").eq(order-1).children("img").clone().fadeIn(1000));
		$("div.title").find("p").fadeOut(500).end().html($("ul.imgs li").eq(order-1).children("p").clone().fadeIn(1000));
		$("ul.change_bt li").eq(order-1).addClass("open").siblings("li").removeClass("open");
	});
	setInterval(function(){
		if(num == $("ul.imgs li").length - 1){
			num = -1;
		}
		num++;
		$("ul.change_bt li").eq(num).trigger("click");
	}, 5000);
	
	var totalWidth = 0;;
	drawWidth();
	$("#pic_list .images").css("width",totalWidth);
	$(".toLeft").bind("click",function(){
		if($(".images").is(":animated")){
			return;
		}
		var curLeft = $(".images").position().left == "auto" ? 0 : parseInt($(".images").position().left);
		var li_num = parseInt($(".images .middle li").length-3);
		$(".images").animate({left:"+=444"},3000,function(){
			$(".images .middle").find("li:gt(" + li_num +")").prependTo($(".images .middle"));
			$(".images").css("left","-=444"); 
		})
	});

$(".toRight").bind("click",function moveToRight(){
		if($(".images").is(":animated")){
			return;
		}
		var curLeft = $(".images").position().left == "auto" ? 0 : parseInt($(".images").position().left);
		$(".images").animate({left:"-=444"},3000,function(){
			$(".images .middle").find("li:lt(2)").appendTo($(".images .middle"));
			$(".images").css("left","+=444"); 
		})
	});
	
	function drawWidth(){
		var single;
		$(".images ul.middle").each(function(){
			single = $(this).children("li").length *230;
		});
		var ul_num = $(".images ul").length;
		totalWidth = single*ul_num;
		$("#pic_list .images").css("width",single*ul_num);
		
	}
	
	setInterval(function(){
		$(".toRight").trigger("click");
	}, 4000);
});

baby.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>傲贝软件乐园orbaby.com</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<script src="js/jquery.js" type="text/javascript" ></script>
	<script src="js/common.js" type="text/javascript" ></script>
  </head>
  
  <body>
  	<div id="header">
  		<div id="logo"></div>
  		<ul>
	  		<li><a href="index.jsp">公园入口</a></li>
	  		<li><a class="cur" href="baby.jsp">幼儿百科园</a></li>
	  		<li><a href="action.jsp"><font color="#6DB52C">新园区即将开放</font></a></li>
	  		<li><a href="about.jsp">关于我们</a></li>
  		</ul>
  	</div>
  	<div id="softbanner">
  		<div class="pro">
			<h3>幼儿百科园：</h3>
			<p>配有多首原创儿童歌曲,根据四季的变化展开"主题儿歌式"教育,将四季的各个不同点变成朗朗上口的儿歌,从而让儿童在娱乐过程中自然记忆. 
				通过多个精美的互动动画以及琅琅上口的儿歌来加深儿童对季节变化中的动植物特征的影响. 
				包含了多个较为隐蔽的互动点,让儿童在娱乐的过程尝试从探索中获得知识. 
			</p>
		</div>
  		<div class="pro_pic"></div>
  		<div class="pic">
  			<div class="pic_img">
  			</div>
		  	<div class="info">
				<div class="title"></div>
				<ul class="change_bt">
					<li value="1" class="open">1</li>
					<li value="2">2</li>
					<li value="3">3</li>
					<li value="4">4</li>
				</ul>
			</div>
  		</div>
  	</div>
  	
  	<div id="pic_list">
  		<h3>软件截图</h3>
  		<div class="toLeft"></div>
  		<div class="wrapper">
	  		<div class="images">
	  			<ul class="middle">
			  		<li class="img"><img src="images/spring.jpg" /></li>
			  		<li class="img"><img src="images/summer.jpg" /></li>
			  		<li class="img"><img src="images/autumn.jpg" /></li>
			  		<li class="img"><img src="images/winter.jpg" /></li>
			  		<li class="img"><img src="images/spring.jpg" /></li>
			  		<li class="img"><img src="images/summer.jpg" /></li>
			  		<li class="img"><img src="images/autumn.jpg" /></li>
			  		<li class="img"><img src="images/winter.jpg" /></li>
		  		</ul>
	  		</div>
  		</div>
  		<div class="toRight"></div>
  	</div>
  	
  	<div id="content">
  		<div class="word">
  			<h3>特色：</h3>
  			<p>配有多首原创儿童歌曲,根据四季的变化展开"主题儿歌式"教育,将四季的各个不同点变成朗朗上口的儿歌,从而让儿童在娱乐过程中自然记忆. 
				通过多个精美的互动动画以及琅琅上口的儿歌来加深儿童对季节变化中的动植物特征的影响. 
				包含了多个较为隐蔽的互动点,让儿童在娱乐的过程尝试从探索中获得知识. 
			</p>
			<p>
				通过多个精美的互动动画以及琅琅上口的儿歌来加深儿童对季节变化中的动植物特征的影响. 
				包含了多个较为隐蔽的互动点,让儿童在娱乐的过程尝试从探索中获得知识. 
			</p>
			<p>建议家长陪同宝宝一起玩乐,有助于亲子教育噢~ 
			</p>
  		</div>
  	
	</div>
  		<ul class="imgs">
	  		<li><p>春天到了，冰雪融化，万物复苏！</p><img src="images/spring.jpg" height="245px" width="400px" /></li>
	  		<li><p>夏天到了，知了叫了，</p><img src="images/summer.jpg" height="245px" width="400px" /></li>
	  		<li><p>秋天到了，树叶黄了，</p><img src="images/autumn.jpg" height="245px" width="400px" /></li>
	  		<li><p>冬天到了，大地被雪复盖</p><img src="images/winter.jpg" height="245px" width="400px" /></li>
  		</ul>
  	<jsp:include page="inc/footer.jsp" />
  </body>
  </html>

common.css

@CHARSET "UTF-8"; * { margin: 0px; padding: 0px; } p { text-indent: 2em; line-height: 1.8em; text-align: left; } body { width: 100%; height: auto; font-size: 13px; font-family: Microsoft YaHei, Arial, Helvetica, sans-serif, Simsun,Arial; font-color: black; text-align: center; background:#F5F5F5; } #header{ width: 800px; height: 100px; margin: 0 auto; background: url("../images/header_bg.png") repeat-x; border-radius: 0px 0px 10px 10px; -moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; * filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4, Direction = 135, Color = "#cccccc" ); } #header #logo { width: 200px; height: 90px; float: left; overflow:hidden; background: url("../images/logo.png") no-repeat; } #header ul{ margin:0px 20px; padding:0px; width:100%; height:100%; list-style:none; } #header ul li{ float:left; width:140px; height:100px; line-height:100%; } #header ul li a{ text-decoration: none; height:100px; line-height:100px; display:block; font-size:16px; font-family:"宋体"; color:#FCA41B; } #header ul li a.cur{ line-height:100px; font-weight: bold; color:white; background:url("../images/hover.png") no-repeat; } #header ul li a:hover{ line-height:100px; font-weight: bold; font-size:18px; /**background:url("../images/hover.png") no-repeat;**/ } #softbanner { width: 800px; height: 250px; margin: 5px auto; background-color: white; border-radius: 10px 0px 10px 0px; -moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; * filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4, Direction = 135, Color = "#cccccc" ); } #softbanner .pro { width: 258px !important; width: 300px; height: 205px !important; height: 250px; float: left; padding: 20px; background: url("../images/pro_bg.png"); border-top: 5px solid #F6FF04; border-radius: 0px 0px 0px 10px; } #softbanner .pro p { margin-top: 20px; } #softbanner .pro_pic { width: 50px; height: 255px; float: left; background: url("../images/center.png") repeat-x; } #softbanner .pic { width: 450px; height: 245px !important; height: 250px; clear: right; float: left; border-bottom: 5px solid #6DB52C; overflow: hidden; } #softbanner .pic .pic_img{ margin:0 auto; padding:0; width: 400px; height: 240px !important; height: 245px; border-radius: 10px; background:white; overflow:hidden; -moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; * filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4, Direction = 135, Color = "#cccccc" ); } #softbanner .pic .info{ margin:0 auto; padding:0; width: 400px; height: 30px !important; height: 30px; border-radius: 0px 0px 10px 10px; overflow:hidden; background:black; position:relative; top:-30px; opacity: 0.50; filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50,finishOpacity=100); } #softbanner .pic .info .title{ width: 300px; height: 30px !important; height: 30px; line-height:30px; text-align:left; vertical-align:center; float:left; color:white; } #softbanner .pic .info ul.change_bt{ margin:0; padding:0px; width:100px; list-style:none; float:left; border-radius: 30px 30px 0px 0px; } #softbanner .pic .info ul.change_bt li{ float:left; width:20px; height: 30px; line-height:30px; margin-left:3px; background:#6DB52C; cursor: pointer; display:block; color:white; } #softbanner .pic .info ul.change_bt li.open{ float:left; width:20px; height: 30px; line-height:30px; margin-left:3px; background:#fff; cursor: pointer; } #content { width: 720px !important; width: 800px; height: auto; margin: 20px auto; padding: 20px 40px; border: 2px solid #E8E8E8; border-top: 0px; border-radius: 0px 0px 10px 10px; background: url("../images/bg.png") repeat-x; -moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; * filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4, Direction = 135, Color = "#cccccc" ); } #pic_list { width: 760px !important; width: 800px; height: 220px !important; height: 260px; margin: 15px auto; padding: 20px; overflow: hidden; border: 2px solid #E8E8E8; border-radius: 0px 0px 10px 10px; background: url("../images/bg.png") repeat-x; -moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; * filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4, Direction = 135, Color = "#cccccc" ); } ul.imgs{ display:none; } #pic_list .wrapper{ width:550px; height:200px; overflow:hidden; position: relative; top:0px; left:0px; float:left; } #pic_list .wrapper .images{ width:1780px; height:200px; position: relative; top:0px; left:-400px; float:left; } #pic_list .toLeft{ width:100px; height:180px; background:url("../images/toLeft.png") no-repeat; float:left; position: relative; top:0px; left:0px; z-index:1; } #pic_list .toRight{ width:100px; height:180px; overflow:hidden; display:inline; float:left; background:url("../images/toRight.png") no-repeat; position: relative; top:0px; left:0px; } #pic_list .wrapper .images ul { margin:0px; padding:0px; list-style:none; width:1780px; overflow:hidden; float:left; } #pic_list .wrapper .images ul li{ width: 200px; height: 160px; float: left; text-align: center; margin: 10px; padding: 10px auto; border-radius: 5px; border: 1px solid #D7D7D7; behavior: url(border-radius.htc); -moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; * filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4, Direction = 135, Color = "#cccccc" ); } #pic_list .wrapper .images ul li img { width:180px; height:140px; text-align: center; margin: 8px auto; border-radius: 5px; -moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; * filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4, Direction = 135, Color = "#cccccc" ); } #Lion{ position:absolute; top:250px; left:300px; width:80px; height:100px; } #Ostrich{ position:absolute; top:330px; left:70px; width:100px; height:100px; } #Monkey{ position:absolute; top:270px; left:210px; width:40px; height:60px; } #Crocodile{ position:absolute; top:340px; left:195px; width:125px; height:40px; } #Elephant{ position:absolute; top:300px; left:550px; width:120px; height:120px; } #Panda{ position:absolute; top:240px; left:550px; width:50px; height:60px; } #Frog{ position:absolute; top:295px; left:470px; width:40px; height:40px; } #Pig{ position:absolute; top:275px; left:500px; width:40px; height:30px; } #Horse{ position:absolute; top:370px; left:280px; width:80px; height:40px; } #Giraffe{ position:absolute; top:210px; left:250px; width:60px; height:100px; } #orbaby{ position:absolute; top:375px; left:356px; width:80px; height:55px; } #footer,#footer p { margin:0 auto; padding:0; width:800px; text-align: center; }

分享到：