轮播JS动画

最新推荐文章于 2024-08-23 14:03:47 发布

chuangzhenger8657

最新推荐文章于 2024-08-23 14:03:47 发布

阅读量81

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/hypduck88/blog/79984

版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片播放js</title>

<style type="text/css">

*{margin:0px; padding:0px; font-size:12px; font-family:Verdana, Geneva, sans-serif;}

.fileSlide{display:block;}
.diapositive{display:none;}
.content{width:986px; margin:0px auto; position:relative;}
    .content_image{width:986px; height:380px; }
    .content_image ul{list-style-type:none;}
    .content_title{ width:200px; height:30px; position:absolute; top:350px; right:0px;}
    .content_title ul{list-style-type:none;}
    .content_title ul li{float:left; cursor:pointer; margin-left:5px; display:inline;}
    .shallow{ width:35px; height:30px; background-color:#F9F; font-size:14px; font-weight:bold; line-height:30px; text-align:center; opacity:0.7;}
    .deppon{background-color:#F00; width:35px; height:30px; font-size:14px; font-weight:bold; line-height:30px; text-align:center; color:#FFFFFF;}


</style>
</head>

<body>

<div class="content">

    <div class="content_image">
        <ul class="imageUL">
            <li class="fileSlide"     id="switch_image_1" index="1"><a href="#"><img src="images/0BD5DCC1CAA14FACA273AB30E08FF766.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
            <li class="diapositive" id="switch_image_2" index="2"><a href="#"><img src="images/6343FBEA187A5FD7D54D07EC9D0492C4.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
            <li class="diapositive" id="switch_image_3" index="3"><a href="#"><img src="images/7825557ABCC86509A53B190EAFB52637.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
            <li class="diapositive" id="switch_image_4" index="4"><a href="#"><img src="images/BCD299F0E1072836F92EB8E1CD5307A9.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
            <li class="diapositive" id="switch_image_5" index="5"><a href="#"><img src="images/BEE35F56FC622A2D5B03D3186E0B62B9.jpg" title="李宁sports运动" alt="李宁sports运动" width="986px" height="380px" /></a></li>
        </ul>
    </div>

    <div class="content_title">
        <ul class="titleUL">
            <li id="switch_title_1" class="shallow deppon" index="1">1</li>
            <li id="switch_title_2" class="shallow" index="2">2</li>
            <li id="switch_title_3" class="shallow" index="3">3</li>
            <li id="switch_title_4" class="shallow" index="4">4</li>
            <li id="switch_title_5" class="shallow" index="5">5</li>
        </ul>
    </div>
</div>


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

</body>
</html>

=====================================index.js代码===================================

$(function(){

    var timer = setTimeout(change,3000);                                //在当前DOM结构加载完毕后3秒执行定时器，调用change函数

    function change(){

        var length = $("li[id^=switch_image_]").length;                    //以属性id为"switch_image_"开头的li个数
        var index = $("li[class=fileSlide]").attr("index");                //获取属性class为fileSlide的li中属性为index的值
        var next_index;

        if(index < length){
            next_index = parseInt(index) + 1;

        }else{
            next_index = 1;

        }

        //图片和文字对应切换。移除当前执行动画的li元素的css样式，给下一个增加动画样式
        $("li[id^=switch_image_"+ index +"]").removeClass("fileSlide").addClass("diapositive");
        $("li[id^=switch_image_"+ next_index +"]").removeClass("diapositive").addClass("fileSlide");
        $("li[id^=switch_title_"+ next_index +"]").removeClass("shallow").addClass("deppon")
                                                    .siblings()                                    //获取当前元素的节点上同级兄弟元素
                                                    .removeClass("deppon").addClass("shallow");

        //3秒后继续调用change函数
        timer = setTimeout(change,3000);

    }

    $(".titleUL li").mouseover(function(){

        clearTimeout(timer);                                                                    //清除定时器
        var flg = $(this).attr("index");                                                         //获取当前li元素中属性index的值

        $("li[id^=switch_title_"+ flg +"]").removeClass("shallow").addClass("deppon")
                                            .siblings()                                            //获取当前元素的节点上同级兄弟元素
                                            .removeClass("deppon").addClass("shallow");


        $("li[id^=switch_image_"+ flg +"]").removeClass("diapositive").addClass("fileSlide")
                                            .siblings()                                            //获取当前元素的节点上同级兄弟元素
                                            .addClass("diapositive").removeClass("fileSlide");


    }).mouseout(function(){

        //开启定时器
        timer = setTimeout(change,3000);

    });


});

转载于:https://my.oschina.net/hypduck88/blog/79984

chuangzhenger8657

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播JS动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln...
复制链接

扫一扫