zoukankan      html  css  js  c++  java
  • jquery 轮播图实例 c

    实现效果:1、图片每2秒钟切换1次。

    2、当鼠标停留在整个页面上时,图片不进行轮播。

    3、当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化。

    4、当图片发生轮播切换时,在不点击小球前提下,相应的小球背景颜色也自动发生变化。

    index.html

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQuery实现轮播图</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
    <div class="main">
    <h3>jQuery实现轮播图</h3>
    <!-- 图片轮播 -->
        <div class="banner">
            <img src="img/1.jpg" />
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
            <img src="img/5.jpg" />
        <!-- 上一张、下一张按钮 -->
        <a href="javascript:void(0)" class="button prev"></a>
        <a href="javascript:void(0)" class="button next"></a>
             <!-- 圆点导航 -->
        <div class="dots">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        </div>
    </div>
    </body>
    </html>

    style.css

    *{margin: 0;padding: 0;}
    body{font-family: " Microsoft YaHei";}
    .main{margin:30px auto;width:1200px;text-align: center;}
    h3{text-align: center;width:1200px;position: relative;}
    /*banner图*/
    .banner{width:1200px; height:460px;overflow: hidden;margin-top: 30px;position: relative;border: 10px solid #bbb; }
    .banner img{vertical-align: bottom;position: absolute;top: 0;left: 0;/*display: none;*/}
    /*.banner img.slide-active{display: block;}*/
    /*切换按钮*/
    .button{position: absolute;width:40px;height:80px;left:0;top:50%;margin-top:-40px;}
    .prev{background:url(../img/pre2.png) no-repeat center center;}
    .next{left: auto;right: 0;background:url(../img/pre.png) no-repeat center center;}
    .button:hover{background-color: #333;opacity: 0.6;filter: alpha(60);}
    /*切换小圆点*/
    .dots{position: absolute;right: 0;bottom: 20px;text-align: right;margin-right: 20px;}
    .dots span{display: inline-block;width: 12px;height: 12px;border-radius: 50%;line-height:12px;background-color: rgba(7,17,27,0.4);box-shadow:0 0 0 2px rgba(255,255,255,0.9) inset;margin-right: 8px;cursor: pointer;}
    .dots span.active{box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background-color: #fff;}

    script.js

    $(document).ready(function(){
        var t,count,
            index=0,
            len=$(".banner img").length;
            
        //  初始化状态,在第一张
        $(".banner img:not(:first-child)").hide();
        $(".dots span:first-child").addClass("active");
       
       // 滑过鼠标清除定时器,滑开继续
        $(".banner").hover(function(){
            clearInterval(t);
        },
        function(){
            t=setInterval(showAuto, 2000);
        });
    
        //点击小圆点跳转到相应页面并且小圆点样式随之改变
        $(".dots span").click(function(){
          count=$(this).index();//获取当前点击对象的id属性值
          changOption(count);
        });
    
        //清除定时器
        if(t){
            clearInterval(t);
            t=null;
        }
    
        // 每隔两秒自动轮播
        t=setInterval(showAuto, 2000);
    
        //点击按钮切换
        $(".prev").click(function(){
            count=$(".active").index();
            count--;
            if(count < 0){count=len-1;}
            changOption(count);     
        });
        $(".next").click(function(){
            count=$(".active").index();
            count++;
            if(count > len-1){count=0;}
            changOption(count);
        });
    
    // 封装自动切换的showAuto函数
    function showAuto(){
            index++;
            if(index > len-1){index=0;}
        changOption(index);
    }
    
    //封装点击小圆点改变背景及自身样式的changeOption()函数
    function changOption(curIndex){
       $(".dots span").siblings().removeClass("active");//查找其他子节点并移除类
       $(".dots span").eq(curIndex).addClass("active");//给当前点击的对象添加类
       $(".banner img").filter(":visible").hide().parent().children().eq(curIndex).show();
       index=curIndex;
    }
    
    });
  • 相关阅读:
    Kafka 生产者 自定义分区策略
    同步互斥
    poj 1562 Oil Deposits(dfs)
    poj 2386 Lake Counting(dfs)
    poj 1915 KnightMoves(bfs)
    poj 1664 放苹果(dfs)
    poj 1543 Perfect Cubes (暴搜)
    poj 1166 The Clocks (暴搜)
    poj 3126 Prime Path(bfs)
    处理机调度
  • 原文地址:https://www.cnblogs.com/leiting/p/7285650.html
Copyright © 2011-2022 走看看