zoukankan      html  css  js  c++  java
  • jQuery轮播图

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery轮播图</title>
    <style>
    body,ul,ol,div,img{margin:0;padding:0;}
    img{100%;}
    ul,ol{list-style:none;}
    .btn{40px;height:40px;background:#666;color:#fff;line-height: 40px;text-align:center;}
    #main{position:relative;top:0;left:0;600px;height:400px;margin:10px auto;overflow: hidden;}
    #tu li{600px;height:400px;display:none;}
    #bottom li{margin:5px;display:inline-block;40px;height:40px;text-align:center;line-height:40px;background:#eee;border-radius:50%;}
    #prev{position:absolute;top:180px;left:10px;}
    #next{position:absolute;top:180px;right:10px;}
    </style>
    </head>
    <body>
    <div id="main">
    <div id="prev" class="btn">&lt;</div>
    <div id="next" class="btn">&gt;</div>
    <ul id="tu">
    <li style="display:block"><img src="images/1.jpg" alt=""></li>
    <li><img src="images/0.jpg" alt=""></li>
    <li><img src="images/3.jpg" alt=""></li>
    <li><img src="images/4.jpg" alt=""></li>
    </ul>
    </div>
    <ol id="bottom">
    <li style="background:red">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ol>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
    // 从第几张开始
    var index=0;
    var timer;
    function PlayStyle(){
    $('#tu li').eq(index).css('display','block').siblings().css('display','none');
    $('#bottom li').eq(index).css('background','red').siblings().css('background','#eee');
    }
    // 循环播放函数
    function goToPlay(){
    timer=setInterval(function run(){
    PlayStyle()
    index++;
    /*当切换到最后一张图片时,再从头开始*/
    if(index>=$('#tu li').length) index=0;
    },2000)
    }
    goToPlay();
    // 数字的鼠标事件
    $('#bottom li').mouseover(function(){
    // 清除定时
    clearInterval(timer);
    // 获取图片的索引
    index=$(this).index();
    // 初始化
    PlayStyle()
    }).mouseout(function(){
    goToPlay();
    })
    // 前进或后退按钮
    $('#prev').click(function(){
    clearInterval(timer);
    //获取显示图片的索引
    index -=1;
    if(index<0) index=$('#tu li').length-1;
    // 初始化
    PlayStyle()
    })
    $('#next').click(function(){
    clearInterval(timer);
    //获取显示图片的索引
    index +=1;
    if(index>$('#tu li').length-1) index=0;
    // 初始化
    PlayStyle()
    })
    // 图片的鼠标事件
    $("#main").mouseover(function(){
    // 清除定时
    clearInterval(timer);
    }).mouseout(function(){
    goToPlay();
    })

    </script>

    </body>
    </html>

  • 相关阅读:
    套题 8.22
    套题 8.21
    P1042 乒乓球
    套题8.20
    #52. 【UR #4】元旦激光炮 (交互式题)
    #82. 【UR #7】水题生成器
    度度熊与邪恶大魔王
    wpf 获取image控件的图片并保存
    wpf 让正执行的程序暂停几秒钟
    wpf问题集锦
  • 原文地址:https://www.cnblogs.com/studyh5/p/8484156.html
Copyright © 2011-2022 走看看