图片滚动 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="showPic1.aspx.cs" Inherits="showPic1" %>

<!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 runat="server">
    <title>图片浏览</title>

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

   
    <style type="text/css">
        .div
{
    position:relative ;
    width: 250px;
    height: 250px;
    margin:0 auto;
    margin-top:100px;
   
   
    display: block;
   
  
}
.div img
{
    width :250px;
    height :250px;
    display :block ;
  
    }
      .page{ position:absolute;  right:0px; bottom:1px; z-index:10; width:auto; height:20px; display:block; padding:0; margin:0;}
      .page ul{ list-style-type:none ;border:1px solid red;  width: auto ; height:20px; padding:0; margin:0;}
      .page ul li{ float:left ; cursor:pointer; text-align:center;  width:30px; height:20px; line-height:20px; list-style:none;  padding:0; margin:0; color:Blue;}
      .back{ background-color:#FF9B37}
      .back1{ background-color:#FF9B37}
    </style>
    <script type="text/javascript" >
      
        var urls,inter;
        $(document).ready(function() {
             
            $(".page ul li").mouseover(function() {

                $(this).addClass("back");
                clearInterval(inter );//鼠标在元素之上时，清除内部时钟
            }).mouseout(function() {
            $(this).removeClass("back");
            inter = setInterval(qiehuan, 5000); //鼠标离开时，设置内部时钟 
            });

            urls = $("#hd_url").html().split('$');//把路径拆分
            $(".page ul li").click(function() {
                var num = $(this).text();

                $("#placeHolder").attr("src", urls[num - 1]);
                $(".back1").removeClass("back1");
                $(this).addClass("back1");
                var place = document.getElementById("placeHolder");
                AutoResizeImage(250, 250, place);
            });

        });
//图片等比例缩放
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;//获得图片宽度
var h = img.height;
wRatio = maxWidth / w;//需要宽度和真实宽度的比
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}
else if (maxWidth==0)
{//
    if (hRatio<1) Ratio = hRatio;
}
else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}
else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
function qiehuan() {
   var obj=$(".back1");
   var num = obj.text();
   if (num == 3) {
       $("#placeHolder").attr("src", urls[0]);
       obj.prev().prev().addClass("back1");
       //alert(obj.pre().pre());
       obj.removeClass("back1");
   }
   else {
       $("#placeHolder").attr("src", urls[num]);
       obj.next().addClass("back1");
       obj.removeClass("back1");
    }
  
    
}
  inter= setInterval(qiehuan,5000);
</script>

</head>
<body>
 
    <form id="form1" runat="server">
    <div>
    <div class ="div" >
    <div>
    <img  src="image/9307489-1_o.jpg" id="placeHolder" alt ="" onload="AutoResizeImage(250,250,this)" /></div>
    <div class="page">
    <ul>
    <li class="back1">1</li>
     <li style=" border-left:1px solid red; ">2</li>
      <li  style=" border-left:1px solid red;  ">3</li>
    </ul>
    </div>
   </div>
      

    </div>
    <div id="hd_url" style=" display:none;"  >
    image/9307489-1_o.jpg$image/885e1555-436f-4931-a226-886b7380c1d3.jpg$image/99e262fa-b30e-472f-96e2-4a6c3a7d37a6.jpg$
    </div>
    </form>
</body>
</html>
View Code

 

posted @ 2013-05-20 18:46  nik2011  阅读(56)  评论(0)    收藏  举报