jq 图片轮播 鼠标放上在html可以正常运行 放到asp.net里面就不能运行了

kim_o 发布于 2014/09/27 09:59
阅读 261
收藏 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--当前页面的三要素-->
<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<!--css , js-->
<style type="text/css">
.GG {
    margin:2px auto;
    width:100%;
    height:400px;
    overflow:hidden;
    position:relative;
}
  .GG img {
        max-width:1349px;
        min-height:400px;
    }
.GG ul{
    width:60px;
    height:12px;
    background-color:rgba(0,0,0,0.5);
    padding:5px 25px;
    border-radius:15px;
    position:absolute;
    left:600px;
    top:350px;
}
 .GG ul li {
        width:10px;height:10px;border:1px solid #fff; list-style:none;float:left;border-radius:5px;margin-right:3px;
    }
   .GG ul li.hover {
            background:#fff;
        }




</style>
</head>
<body>
<div class="GG">
            <img src="images/bg.jpg" />
            <img src="images/bg_title.jpg" />
            <img src="images/LoginBj.png" />
            <img src="images/Loginbk.png" />
            <ul class="btn">
                <li class="hover"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>






<!--引入我们的jquery 库-->
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
        var index = 0;
        var IntervalTime = null;
        $(".btn li").mouseover(function () {
            clearInterval(IntervalTime);
            index = $(this).index();
            $(this).addClass("hover").siblings().removeClass("hover");
            $(".GG img").eq(index).show().siblings("img").hide();
        }).mouseout(function () {
            autoPlay();
        });
        function autoPlay() {
            IntervalTime = setInterval(function () {
                index++;
                if (index > 3) { index = -1;} else {
                    $(".GG img").eq(index).show().siblings("img").hide();
                    $(".btn li").eq(index).addClass("hover").siblings().removeClass("hover");
                }
            }, 3000);
        }
        autoPlay();
    </script>


</body>

</html>             <-------鼠标经过可以实现换图------------->


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JQPU.WebForm1" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="script/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        var index = 0;
        var IntervalTime = null;
        $(".btn li").mouseover(function () {
            clearInterval(IntervalTime);
            index = $(this).index();
            $(this).addClass("hover").siblings().removeClass("hover");
            $(".GG img").eq(index).show().siblings("img").hide();
        }).mouseout(function () {
            autoPlay();
        });
        function autoPlay() {
            IntervalTime = setInterval(function () {
                index++;
                if (index > 3) { index = -1; } else {
                    $(".GG img").eq(index).show().siblings("img").hide();
                    $(".btn li").eq(index).addClass("hover").siblings().removeClass("hover");
                }
            }, 3000);
        }
        autoPlay();
    </script>
    <style type="text/css">
        .GG {
            margin: 2px auto;
            width: 100%;
            height: 400px;
            overflow: hidden;
            position: relative;
        }


            .GG img {
                max-width: 1349px;
                min-height: 400px;
            }


            .GG ul {
                width: 60px;
                height: 12px;
                background-color: rgba(0,0,0,0.5);
                padding: 5px 25px;
                border-radius: 15px;
                position: absolute;
                left: 600px;
                top: 350px;
            }


                .GG ul li {
                    width: 10px;
                    height: 10px;
                    border: 1px solid #fff;
                    list-style: none;
                    float: left;
                    border-radius: 5px;
                    margin-right: 3px;
                }


                    .GG ul li.hover {
                        background: #fff;
                    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="GG">
                <img src="images/bg.jpg" />
                <img src="images/bg_title.jpg" />
                <img src="images/LoginBj.png" />
                <img src="images/Loginbk.png" />
                <ul class="btn">
                    <li class="hover"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </form>
</body>
</html>   《------- 鼠标经过无反应------》

加载中
0
Tuesday
Tuesday
开启ie开发者工具..
Tuesday
Tuesday
回复 @2014xy : 谷歌也有开发者工具. 这是前端工作者必学知识.
kim_o
kim_o
我是用的谷歌浏览器
返回顶部
顶部