Python之路【第二十二篇】:轮播图片CSS

轮播代码如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js">script>
    <title>Titletitle>
    <style>
        .outer{
            width: 790px;
            height: 340px;
            margin: 80px auto;
            position: relative;
        }

        .img li{
            position: absolute;
            list-style: none;
            top:0;
            left: 0;


        }

        .num{
            position: absolute;
            bottom: 0px;
            left: 280px;
            /*background-color: #dce7f4;*/
            list-style: none;
        }

        .num li{
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            margin-left: 14px;
        }

        .btn{
            position: absolute;
            top: 50%;
            width: 30px;
            height: 60px;
            background-color: lightgrey;
            color: white;

            text-align: center;
            line-height: 60px;
            font-size: 30px;
            opacity: 0.8;
            margin-top: -30px;
            display: none;

        }

        .left{
            left: 0;
        }

        .right{
            right: 0;
        }

        .outer:hover .btn{
            display: block;
        }

        .num .active{
            background-color: red;

        }
    style>
head>
<body>

    <div class="outer">
        
        <ul class="img">
            <li><a href=""><img src="img/1.jpg" alt="">a>li>
            <li><a href=""><img src="img/2.jpg" alt="">a>li>
            <li><a href=""><img src="img/3.jpg" alt="">a>li>
            <li><a href=""><img src="img/4.jpg" alt="">a>li>
            <li><a href=""><img src="img/5.jpg" alt="">a>li>
            <li><a href=""><img src="img/6.jpg" alt="">a>li>
        ul>

        <ul class="num ">
            
            
            
            
            
            
        ul>
        <div class="left btn"> < >
        <div class="right btn"> > div>
    div>
<script>
    // 通过jquery自动创建按钮标签
    var img_num=$(".img li").length;

    for (var j=0;j<(img_num);j++){
        $(".num").append("
  • ") } $(".num li").eq(0).addClass("active"); //手动轮播 // $(".num li").mouseover(function () { // var index=$(this).index(); //this不应该加引号 // $("this").addClass("active").siblings().removeClass("active") // // }) $(".num li").mouseover(function () { // var index=$(this).index(); i=$(this).index(); $(this).addClass("active").siblings().removeClass("active"); //以下两种方法都可实现 // $(".img li").eq(index).show(1).siblings().hide() $(".img li").eq(index).stop().fadeIn(200).siblings().stop().fadeOut(200) }); //自动轮播 var c=setInterval(GO_R,1500); var i=0; function GO_R() { if(i==img_num-1){ i=-1 } i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } function GO_L() { if(i==0){ i=img_num } i--; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } $(".outer").hover(function () { clearInterval(c) },function () { c=setInterval(GO_R,1500) }) //button加定播 // $(".right").bind("click",GO_R) $(".right").click(GO_R); $(".left").click(GO_L); script> body> html>

    效果展示:

    Python之路【第二十二篇】:轮播图片CSS_第1张图片

     

    你可能感兴趣的:(Python之路【第二十二篇】:轮播图片CSS)