轮播图

来源：互联网发布：武汉大学网络教育编辑：程序博客网时间：2024/05/07 19:05

html:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="css/css.css" rel="stylesheet" />    <script src="js/jquery-1.10.2.min.js"></script>    <script src="js/demo.js"></script></head><body>    <div id="dlunbo">        <div id="igs">            <div class="ig"><img src="img/100.jpg" /></div>            <div class="ig"><img src="img/101.jpg" /></div>            <div class="ig"><img src="img/103.jpg" /></div>            <div class="ig"><img src="img/104.jpg" /></div>            <div class="ig"><img src="img/105.jpg" /></div>            <div class="ig"><img src="img/106.jpg" /></div>        </div>        <div id="tabs">            <div class="tab bg">1</div>            <div class="tab">2</div>            <div class="tab">3</div>            <div class="tab">4</div>            <div class="tab">5</div>            <div class="tab">6</div>        </div>        <div class="btn btn1"><</div>        <div class="btn btn2">></div>    </div></body></html>

css.css

* {    padding: 0px;    margin: 0px;}#dlunbo {    width: 500px;    height: 333px;    position: absolute;    left: 50%;    margin-left: -250px;    top: 50%;    margin-top: -166px;}.ig {    position: absolute;}#tabs {    position: absolute;    top: 290px;    left: 220px;}.tab {    width: 30px;    height: 30px;    background-color: #0094ff;    color: #fff;    float: left;    margin-right: 8px;    text-align: center;    line-height: 30px;    border-radius: 100%;    cursor: pointer;}.btn {    width: 50px;    height: 80px;    position: absolute;    background: rgba(0,0,0,0.6);    color: #fff;    text-align: center;    line-height: 80px;    font-size: 40px;    top: 50%;    margin-top: -40px;    cursor: pointer;}.btn1 {    left: 0px;}.btn2 {    right: 0px;}#tabs .bg {background-color:#f00;}

Demo. js

/// <reference path="jquery-1.10.2.min.js" />var i = 0;var timer;$(function () {    $(".ig").eq(0).show().siblings().hide();    PicLunbo();    $(".tab").hover(function () {        clearInterval(timer);        i = $(this).index();        ShowPicTab();    }, function () {        PicLunbo();    });    $(".btn1").click(function () {        clearInterval(timer);        i--;        if (i == -1) {            i = 5;        }        ShowPicTab();        PicLunbo();    });    $(".btn2").click(function () {        clearInterval(timer);        i++;        if (i == 6) {            i = 0;        }        ShowPicTab();        PicLunbo();    });});function ShowPicTab() {    $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);    $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");}function PicLunbo() {    timer = setInterval(function () {        i++;        if (i == 6) {            i = 0;        }        ShowPicTab();    }, 3000);}

0 0