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>

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

  • 相关阅读:
    Git使用
    sql 索引【转】
    SpringBoot | 第三十八章:基于RabbitMQ实现消息延迟队列方案
    SpringBoot | 第三十七章:集成Jasypt实现配置项加密
    SpringBoot | 第三十六章:集成多CacheManager
    分布式定时器的一些解决方案
    SpringBoot | 第三十五章:Mybatis的集成和使用
    SpringBoot | 第三十四章:CXF构建WebService服务
    SpringBoot | 第三十三章:Spring web Servcies集成和使用
    SpringBoot | 第三十二章:事件的发布和监听
  • 原文地址:https://www.cnblogs.com/lrbee/p/6035552.html
Copyright © 2011-2022 走看看