写了一个jquery循环幻灯片

自己写的一个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="data:images/spring.jpg" /></li> <li class="img"><img src="data:images/summer.jpg" /></li> <li class="img"><img src="data:images/autumn.jpg" /></li> <li class="img"><img src="data:images/winter.jpg" /></li> <li class="img"><img src="data:images/spring.jpg" /></li> <li class="img"><img src="data:images/summer.jpg" /></li> <li class="img"><img src="data:images/autumn.jpg" /></li> <li class="img"><img src="data: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="data:images/spring.jpg" height="245px" width="400px" /></li> <li><p>夏天到了，知了叫了，</p><img src="data:images/summer.jpg" height="245px" width="400px" /></li> <li><p>秋天到了，树叶黄了，</p><img src="data:images/autumn.jpg" height="245px" width="400px" /></li> <li><p>冬天到了，大地被雪复盖</p><img src="data: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; }

写了一个jquery循环幻灯片相关推荐

自己在项目中写的一个Jquery插件和Jquery tab 功能
后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")]public class PDFSearchR ...
java 如何跳到上一个循环_Java 代码优化 Java 如何写好一个 for 循环
Java 代码优化 Java 如何写好一个 for 循环 Java 代码优化 Java 如何写好一个 for 循环看到这个标题可能吓一跳,观众可能会有如下的OS ......... 满脸的不屑, ...
写了一个jquery.imagesview插件，支持图片拖动、缩放类似ACDSEE效果
做项目的时候客户总是比较关心前台界面,这不最近又遇到一个难缠的客户.要求在前台的缩略图点开后查看高分辨率的图片,并且最好能像ACDSEE那样方便浏览,支持拖动.按比例放大缩小. 这样的效果记得在SIN ...
css写的一个简单的幻灯片效果页面
制作幻灯片,第一反应是用css3的Animation,那我就简单介绍一下Animation. CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. t ...
linux下c语言按q退出_在linux下C语言写了一个while循环，怎么实现按任意键退出。如何编写程序？...
这样解决: 建立一个头文件kbhit.h 内容如下: #ifndef KBHITh #define KBHITh void init_keyboard(void); void close_keyboa ...
基于Bootstrap4写的一个JQuery分页插件
为了便于代码阅读,移至 https://github.com/yyycode/jquery-bootstrap4-pagination
Jquery封装幻灯片效果
前几天在我同事博客里面看到一篇幻灯片所以觉得用Jqeury写幻灯片也并不是很难就是和我在博客里面的tab自动切换的原理是一模一样的只是形式不同而已!所以今天也写了一个常见的幻灯片效果用Jqu ...
浅析jQuery原理并仿写封装一个自己的库
[前言]最近项目忙的脚不沾地,刚刚结束,准备整理一下以前写的一些学习笔记和技术文章.本文原是很久之前看jq源码时写的片段,隔了很久再看都忘得差不多了.简单整理出来,做个记录. 作为一名前端工程师,jQ ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...

写了一个jquery循环幻灯片

写了一个jquery循环幻灯片相关推荐

最新文章

热门文章