• jquery实现图片轮播淡入淡出效果


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * {margin:0; padding:0;}
            #container {605px; height:284px; position:relative; border:1px solid; margin:0 auto;}
            .topic {position:absolute; top:0px; left:0px; display:none;}
            #pages {100%; height:20px; padding:5px 0; background:black; position:absolute; left:0; bottom:0;}
            #pages div {20px; height:20px; border-radius:10px; background:white; margin-left:10px; float:left;}
            #pages div.curr {background:red;}
            #prev, #next { 50px; height:100px; position:absolute; top:0; bottom:0; margin:auto 0; background:black; opacity:0.5; color:white; font-size:30px; line-height:100px; text-align:center;}
            #next {right:0;}
        </style>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function(){
                var curIndex=0,
                    nextIndex=1,
                    len=$(".topic").length;

                   //小圆点的点击事件的实现
                    for(var i=0;i<len;i++){
                        $("<div></div>").appendTo("#pages");
                    }
                $("#pages div").eq(0).addClass("curr");
                //小圆点的点击事件
                $("#pages div").click(function(){
                    if(curIndex===$(this).index()){
                        return;
                    }
                    nextIndex=$(this).index();
                    move();
                });
                //上一页
                $("#prev").click(function(){
                    nextIndex=curIndex-1;
                    if(nextIndex<0){
                        nextIndex=len-1;
                    }
                    move();
                });
                //下一页
                $("#next").click(function(){
                    move();
                });

                //运动函数
                function move(){
                    $("#pages div").eq(curIndex).removeClass("curr");
                    $("#pages div").eq(nextIndex).addClass("curr");
                    $(".topic").eq(curIndex).fadeOut();
                    $(".topic").eq(nextIndex).fadeIn();
                    curIndex=nextIndex;
                    nextIndex++;

                    if(nextIndex===len){
                        nextIndex=0;
                    }
                }
                //鼠标移入时停止计时器,移出时开启计时器
                $("#container").hover(function(){
                    clearInterval(time);
                },function(){
                    time=setInterval(move,3000);
                }).trigger("mouseleave");
                
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div class="box">
                <div class="topic" style="display:block;">
                    <a href="#"><img src="img/1.jpg" height="284" width="605"></a>
                </div>
                <div class="topic">
                    <a href="#"><img src="img/2.jpg" height="284" width="605"></a>
                </div>
                <div class="topic">
                    <a href="#"><img src="img/3.jpg" height="284" width="605"></a>
                </div>
                <div class="topic">
                    <a href="#"><img src="img/4.jpg" height="284" width="605"></a>
                </div>
                <div class="topic">
                    <a href="#"><img src="img/5.jpg" height="284" width="605"></a>
                </div>
                <div class="topic">
                    <a href="#"><img src="img/6.jpg" height="284" width="605"></a>
                </div>
            </div>
            <div id="pages"></div>
            <div id="prev">&lt;</div>
            <div id="next">&gt;</div>
        </div>
    </body>
    </html>

  • 相关阅读:
    CF460 A. Vasya and Socks
    HDU-2159FATE(二维完全背包)
    HDU-2844 Coins(多重背包)
    POJ 1014 Dividing(多重背包)
    HDU2191(多重背包)
    数据结构课程设计:稀疏矩阵(加、减、乘、求逆矩阵)
    (转载)线段树模板(来自胡浩大牛)
    poj2386(简单dfs)
    Poj1852
    poj2109
  • 原文地址:https://www.cnblogs.com/html-go/p/5905757.html
Copyright © 2020-2023  润新知