轮播图练习

最新推荐文章于 2023-09-17 14:12:21 发布

小布很生气

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量375

点赞数

分类专栏：日常练习

本文链接：https://blog.csdn.net/weixin_42100915/article/details/80553890

版权

日常练习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

插件：

bootstrap（页面效果）和 font-awesome （小图标）和 bxSlider（轮播图）

https://blog.csdn.net/weixin_42100915/article/details/80705624

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .ourter{
        width: 790px;
        height: 340px;
        position: relative;
        left: 200px;
        top:50px;
    }
    .ourter:hover .btn{
        display: block;
    }
    img{
        position: absolute;
        left: 0;
        top:0;
        list-style: none;
    }
    .u{
        position: absolute;
        bottom: 18px;
        left: 270px;
        list-style: none;
        /*background-color: grey;*/
    }
    .u li{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 18px;
        margin-left: 4px;
    }
    .btn{
        position: absolute;
        background-color: grey;
        opacity: 0.7;
        width: 35px;
        height: 60px;
        top:50%;
        margin-top: -30px;
        text-align: center;
        line-height: 60px;
        color: red;
        display: none;
    }
    .left{
        left: 0;
    }
    .right{
        right: 0;
    }
     .u .active{
        !important;
        background-color: red;
    }
</style>
<body>



<div class="ourter">
     <ul class="be">
        <li><a href="#"><img src="img/1.jpg"/></a></li>
        <li><a href="#"><img src="img/2.jpg"/></a></li>
        <li><a href="#"><img src="img/3.jpg"/></a></li>
        <li><a href="#"><img src="img/4.jpg"/></a></li>
        <li><a href="#"><img src="img/5.jpg"/></a></li>
    </ul>

    <ul class="u">
        <!--<li>1</li>-->
        <!--<li>2</li>-->
        <!--<li>3</li>-->
    </ul>

    <div class="left btn" > < </div>
    <div class="right btn"> > </div>

</div>



<script src="jquery-3.1.js">
</script>
<script>
    var i=0;
    var $num=$(".be li").length;  // 动态添加标签
    for (var s=0;s<$num;s++){
        var $ele=$("<li></li>");
        $(".u").append($ele);
    };

    // 手动轮播
    $(".u li").eq(0).addClass("active");  // 设置默认样式

   $(".u li").mouseover(function () {
       i=$(this).index();  // 给i赋值
       $(this).addClass("active").siblings().removeClass("active");
       // $(".be li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
       $(".be li").eq(i).stop().show(1000).siblings().stop().hide(1000);
   });

   //自动轮播
    var c=setInterval(GO_R,1500);  // 一定时间执行函数

    function GO_R() {
        if(i==$num-1){
            i=-1;
        }
        i++;  // 根据索引
        $(".u li").eq(i).addClass("active").siblings().removeClass("active");
        // 改变红点
        $(".be li").eq(i).stop().show(1000).siblings().stop().hide(1000);
        // 改变图片
    }

    function GO_L() {
        if(i==0){
            i=$num;
        }
        i--;
        $(".u li").eq(i).addClass("active").siblings().removeClass("active");
        // 改变红点
        $(".be li").eq(i).stop().show(1000).siblings().stop().hide(1000);
        // 改变图片
    }
// 鼠标放到盒子上停止
    $(".ourter").hover(function () {
        clearInterval(c);  // 清除自动轮播
    },function () {
        c=setInterval(GO_R,1500);  // 创建自动轮播
    });

// button 定播

    $(".right").click(GO_R); // 调用函数

$( ". left "). click( GO_L); </ script > </ body > </ html >

小布很生气

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图练习

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;style&gt; .ourter{
复制链接

扫一扫