您的位置：首页 > Web前端 > JQuery

jquery实现图片自动轮换效果(兼容IE6,IE7)

2013-11-27 10:24 846 查看

总是用别人的例子，出错了不知道怎么改，就自己亲自写了一个，有注释，通俗易懂，希望能跟大家一起沟通交流

目录结构如下：

源代码下载地址：http://pan.baidu.com/s/1zkY5i (下载即可打开)

IE7下效果图如下:

源码下载地址:http://pan.baidu.com/s/1EcqJO (需要复制网址打开)

domo.html代码如下：

.................................................................................................................................................................................................................

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/1.css" />
<title>图片轮播</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
    /*初始化是向右转动*/
    var dir = "right";
    var timer;
    var speed = 1000;

    function direct(old_dir) {
        dir = old_dir;
        if (dir == "right") {
            /*清除计时器*/
            window.clearInterval(timer);
            /*计时器*/
            timer = window.setInterval("right()", speed);
        }
        if (dir == "left") {
            /*清除计时器*/
            window.clearInterval(timer);
            /*计时器*/
            timer = window.setInterval("left()", speed);
        }
    }

    /*向左滚动*/
    function left() {
        var left = $("#pic").css("left");
        var left1 = parseInt(left) + 230;
        if (left1 > 0) {
            left1 = -1840;
        }
        k = left1 / -230;
        $("#pic").css("left", left1);
        $("#banner_btn li").siblings().removeClass("current");
        $("#banner_btn li").eq(k).addClass("current");
    }

    /*向右滚动*/
    function right() {
        var left = $("#pic").css("left");
        var left1 = parseInt(left) - 230;
        if (left1 < -1840) {
            left1 = 0;
        }
        k = left1 / -230;
        $("#pic").css("left", left1);
        $("#banner_btn li").siblings().removeClass("current");
        $("#banner_btn li").eq(k).addClass("current");
    }

    /*页面初始化执行*/
    $(function() {
        /*自动滚动*/
        direct(dir);
        /*鼠标移到数字上切换图片*/
        $("#banner_btn li").hover(function() {
            window.clearInterval(timer);
            /*跟自己同级别的所有节点*/
            $(this).siblings().removeClass("current");
            $(this).addClass("current");
            var i = $(this).index();
            var j = -230 * parseInt(i);
            $("#pic").css("left", j);
        });
        /*鼠标离开数字时继续滚动*/
        $("#banner_btn li").mouseleave(function() {
            direct(dir);
        });
        /*鼠标移到图片上停止滚动*/
        $(".pic li img").hover(function() {
            window.clearInterval(timer);
        });
        /*鼠标移开继续滚动*/
        $(".pic li img").mouseleave(function() {
            direct(dir);
        });
    });
</script>
</head>
<body>
    <div class="a">
        <pre class="pre" onClick="direct('left');">pre</pre>
        <pre class="next" onClick="direct('right');">next</pre>
        <div class="pic1">
            <ul class="pic" id="pic">
                <li><img src="images/13691345082.jpg"></li>
                <li><img src="images/1353485118249.jpg"></li>
                <li><img src="images/1355742153253.jpg"></li>
                <li><img src="images/1363943359756.jpg"></li>
                <li><img src="images/1364279216643.jpg"></li>
                <li><img src="images/1366770146652.jpg"></li>
                <li><img src="images/1367138383721.jpg"></li>
                <li><img src="images/1368518565890.jpg"></li>
                <li><img src="images/1372038703930.jpg"></li>
            </ul>
        </div>
        <ul id="banner_btn" class="points">
            <!-- creatBtnli() -->
            <li num="0" class="current">1</li>
            <li num="1" class="">2</li>
            <li num="2" class="">3</li>
            <li num="3" class="">4</li>
            <li num="4" class="">5</li>
            <li num="5" class="">6</li>
            <li num="6" class="">7</li>
            <li num="7" class="">8</li>
            <li num="8" class="">9</li>
            <!-- <li num="9" class="">9</li> -->
        </ul>
    </div>

</body>
</html>

............................................................................................................................................

css代码如下：

............................................................................................................................................

body{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.a {
    width: 800px;
    margin: 0 auto;
    position: relative;
}
.a .pre{
    background: url("images/20120606wwwzzjsnet_40.png") no-repeat;
    text-indent: -999px;
    width: 39px;
    height: 81px;
    position: absolute;
    left: 150px;
    top:150px;
    cursor: pointer;
}
.a .next{
    background: url("images/20120606wwwzzjsnet_40.png") no-repeat 100%;
    text-indent: -999px;
    width: 39px;
    height: 81px;
    position: absolute;
    right: 150px;
    top:150px;
    cursor: pointer;
}
.a .pic1{
    width: 230px;
    height: 350px;
    overflow: hidden;
    margin: 0 auto;
    position:relative;

top:0;

left:0;
}
.a .pic{
    left:0px;
    width: 10000px;
    position: relative;
}
.a .pic li{
    float: left;
    
}
.a .points{
    margin: 0 auto;
    width: 270px;
    height:30px;
}
.a .points li{
    float: left;
    padding: 1px 7px;
    border: 1px solid;
    margin: 3px;
    cursor: pointer;
}
.a .points .current{
    background-color: #DB5C49;
}

-----------------------------------------------------------------------------------------------------------------

源代码下载地址：http://pan.baidu.com/s/1zkY5i (下载即可打开) 欢迎大家共同沟通学习

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航