图片跑马灯效果

来源：互联网发布：淘宝上怎么找到凤楼编辑：程序博客网时间：2024/04/29 17:17
jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <title>图片跑马灯效果</title><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript">$(document).ready(function(){myScroll();$.each($("#scroll").find("div.numscroll ul li span"),function(i,item){$(item).mouseover(function(){clearInterval(myScrollInterval);$("div.numscroll ul li span").removeClass("hover");$("div.numscroll ul li").eq(i).find("span").attr("class","hover");$("div.textShow").text($("div.visable ul li").eq(i).find("a img").attr("lang"));$("div.content").html($("div.visable ul li").eq(i).html()).fadeIn("normal");scrollPicNow=i+1;scrollPicNow=scrollPicNow==$("div.visable ul li").length?0:scrollPicNow;});$(item).mouseout(function(){myScrollInterval=setInterval(myScroll,2000);});});var myScrollInterval=setInterval(myScroll,2000);var scrollPicNow = 0;function myScroll(){$("div.numscroll ul li span").removeClass("hover");$("div.numscroll ul li").eq(scrollPicNow).find("span").attr("class","hover");//$("div.textShow").text($("div.visable ul li").eq(scrollPicNow).find("a img").attr("lang"));$("div.content").html($("div.visable ul li").eq(scrollPicNow).html()).fadeIn("slow");scrollPicNow++;scrollPicNow=scrollPicNow==$("div.visable ul li").length?0:scrollPicNow;}});</script><link href="hpLogin.css" rel="stylesheet" type="text/css" /></head><body><div id="wrap">    <!--内容区域-->    <div id="content">        <!--图片区域-->            <div style="position:relative; width:560px; height:235px; float:left;">        <div id="scroll">                <div class="visable">                    <ul>                    <li><a href="javascript:void(0);"><img src="1.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>                    <li><a href="javascript:void(0);"><img src="2.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>                    <li><a href="javascript:void(0);"><img src="3.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>                    <li><a href="javascript:void(0);"><img src="4.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>                    <li><a href="javascript:void(0);"><img src="5.jpg" style="width: 550px;height: 218px;" lang=""/></a></li>                </ul>           </div>        <div class="content"></div>            <div class="numscroll">                <ul><%int count=5;for(int i=0;i<count;i++){ %>                <li><span class="<%=i==0?"hover":""%>"><%=i+1 %></span></li><%}%>                    </ul>             </div>        </div>            </div></div></div></body></html>