zoukankan      html  css  js  c++  java
  • 一个jQ版大图滚动

    难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正:

    运作环境win7,代码编辑器是:sublime; 我把源码复制了一下,

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    #outer{ 314px;height: 220px;position: relative;margin: 30px auto;}
    #inner{ 314px;height: 220px;position: absolute;z-index: -1;}
    #inner img{ 314px;height: 220px;position: absolute;left: 0;top: 0; z-index: 0; opacity: 0;}
    #xiabiao{ 100px;overflow: hidden;position: absolute;bottom: 10px;left: 100px;list-style: none;}
    #xiabiao li{ 15px;height: 15px;font-size: 12px; float: left;margin-left: 5px;background: #fff;text-align: center;cursor: pointer;}
    #left{ 30px;height: 60px;position: absolute;left: 0;top: 80px;background: #aaa;opacity: 0.5;cursor: pointer;}
    #right{ 30px;height: 60px;position: absolute;right: 0;top: 80px;background: #aaa;opacity: 0.5;cursor: pointer;}
    #inner .show{opacity: 1;}
    #xiabiao .select{background: red;color: #fff;}
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="inner">
    <img class="show" src="img/01.jpg" alt="">
    <img src="img/02.jpg" alt="">
    <img src="img/03.jpg" alt="">
    <img src="img/04.jpg" alt="">
    <img src="img/06.jpg" alt="">
    </div>
    <ul id="xiabiao">
    <li class="select">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    <p id="left"></p>
    <p id="right"></p>
    </div>

    <script src="jquery.js"></script>
    <script>
    var x=0;
    var y;
    var timer1=null,timer2=null,timer3=null;
    $(function () {
    function everygo(){
    var a=0;
    if (x>=$('#inner img').length) {
    x=0;
    };
    $('#xiabiao li').eq(x).css({'background':'red','color':'#fff'}).siblings().css({'background':'#fff','color':'black'});
    $('#inner img').eq(x).css('z-index','1').siblings().css('z-index','0');
    timer1=setInterval(function(){
    a++;
    if (a>=10) {
    clearInterval(timer1);
    $('#inner img').eq(x).siblings().css('opacity','0');
    };
    var b=a/10;
    $('#inner img').eq(x).css('opacity',b);
    },30)
    };
    function autogo(){
    timer2=setInterval(function () {
    x++;
    everygo();
    },2000)
    };
    autogo();
    $('#xiabiao li').click(function () {
    clearInterval(timer1);
    clearInterval(timer2);
    x=$(this).index();
    everygo();
    autogo();
    })
    $('#left').click(function () {
    clearInterval(timer1);
    clearInterval(timer2);
    x--;
    everygo();
    autogo();
    })
    $('#right').click(function(){
    clearInterval(timer1);
    clearInterval(timer2);
    x++;
    everygo();
    autogo();
    })
    });

    </script>
    </body>
    </html>

    忙的时候想休息,休息的时候想代码,也是没有谁了,呵呵口水大军淹死我吧。

  • 相关阅读:
    字节跳动2020年九月笔试题-爬楼梯(不能连续爬两个两步)
    c/c++经典面试题-part1
    C++单例模式之一见钟情
    多线程同步的四种方式(史上最详细+用例)
    c++多态之动态绑定
    Redis从入门到入坑
    编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串 是由同一字符组成的。
    面试之进制转换函数
    c++编程题之空调遥控器
    static 和 const关键字的作用
  • 原文地址:https://www.cnblogs.com/lrbee/p/6035552.html
Copyright © 2011-2022 走看看