Jquery淡入淡出轮播图

Jquery淡入淡出轮播图

因为代码不多所以我就写一个html文件里了

html代码

<div class="banner">
  <ul>
    <li><a href="javascript:;"><img src="./1 (1).png" />a>li>
    <li><a href="javascript:;"><img src="./1 (2).png" />a>li>
    <li><a href="javascript:;"><img src="./1 (3).png" />a>li>
    <li><a href="javascript:;"><img src="./1 (4).png" />a>li>
    <li><a href="javascript:;"><img src="./1 (5).png" />a>li>
  ul>
  <div class="arrow">
    <span class="arrow-l"><>
  <span class="arrow-r">>span>
  div>
  <ol>
    <li class="dot">li>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
  ol>
div>

css代码

javascript代码

完整的代码如下:

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{
                background-color:#fff;
            }
            li{
                list-style:none;
            }
            .banner{
                width:1920px;
                height:450px;
                margin:100px auto;
                position:relative;
            }

            .banner ul li{
                display:none;
                position:absolute;
            }
            .banner ul li:first-child{
                display:block;
            }
            .banner ul li a{
                display:block;
            }
            .banner ul li a img{
                width:1920px;
                height:auto;
            }

            .arrow span {
                width:20px;
                height:30px;
                background:rgba(0,0,0,0.05);
                color:#fff;
                position:absolute;
                top:50%;
                transform:translate(0,-50%);
                line-height:30px;
                text-align:center;
                font-size:20px;
                cursor:pointer;
            }
            .arrow-l{
                left:20px;
            }
            .arrow-r{
                right:20px;
            }
            .banner ol{
                position:absolute;
                bottom:20px;
                right:60px;
            }
            .banner ol li {
                float: left;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: rgba(0,0,0,0.4);
                margin-left:12px;
                cursor:pointer;
                border:2px solid rgba(255,255,255,0.3);
            }
            .banner ol li.dot{
                border:2px solid rgba(0,0,0,0.4);
                background:#fff;
            }
        style>
head>
<body>
    <div class="banner">
        <ul>
            <li><a href="javascript:;"><img src="./1 (1).png" />a>li>
            <li><a href="javascript:;"><img src="./1 (2).png" />a>li>
            <li><a href="javascript:;"><img src="./1 (3).png" />a>li>
            <li><a href="javascript:;"><img src="./1 (4).png" />a>li>
            <li><a href="javascript:;"><img src="./1 (5).png" />a>li>
        ul>
        <div class="arrow">
            <span class="arrow-l"><>
            <span class="arrow-r">>span>
        div>
        <ol>
            <li class="dot">li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
        ol>
    div>

<script src="./jquery-1.9.1.js">script>
<script>
    //切换图片函数
    function bannerImg(count,Img,dot) {
        //让索引为count的li元素显示出来,siblings其他li元素隐藏
        $(Img).eq(count).stop("slow").fadeIn().siblings("li").stop().fadeOut("slow");
        //切换当前索引的小圆点样式
        $(dot).eq(count).addClass("dot").siblings("li").removeClass("dot");
    }
    $(function () {
        var count = 0;
        var banImg = $(".banner ul li");
        var bandot = $(".banner ol li");
        //下一张
        $(".arrow-r").click(function () {
            count++;
            if (count == banImg.length) {
                count = 0;
            }
            bannerImg(count, banImg, bandot);
        });
        //上一张
        $(".arrow-l").click(function () {
            count--;
            if (count < 0) {
                count = banImg.length - 1;
            }
            bannerImg(count, banImg, bandot);
        });
        //小圆点控制轮播
        $(bandot).click(function () {
            count = $(this).index();
            bannerImg(count, banImg, bandot);
        })
        //定时器轮播
        var adTimer;
        adTimer = setInterval(function () {
            count++;
            if (count == banImg.length) {
                count = 0;
            }
            bannerImg(count, banImg, bandot);
        }, 3000);
        //鼠标移入停止轮播
        $(".banner").mouseover(function () {
            clearInterval(adTimer);
        });
        //鼠标移出开始轮播
        $(".banner").mouseout(function () {
            adTimer = setInterval(function () {
                count++;
                if (count == banImg.length) {
                    count = 0;
                }
                bannerImg(count, banImg, bandot);
            }, 3000);
        });
    }) 
script>
body>
html>

 

 

 

你可能感兴趣的:(Jquery淡入淡出轮播图)