jquery-unslider轮播图

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>unslider演示</title>

<script src="jquery-1.11.1.min.js"></script>
<script src="unslider.min.js"></script>

<!-- 写点样式,让轮播好看点 -->
<style>
    ul, ol { padding: 0;}
    .banner { position: relative; overflow: auto; text-align: center;}
    .banner li { list-style: none; }
    .banner ul li { float: left; }
    #carousel { width: 640px;}
    #carousel .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
    #carousel .dots li 
    { 
        display: inline-block; 
        width: 10px; 
        height: 10px; 
        margin: 0 4px; 
        text-indent: -999em; 
        border: 2px solid #fff; 
        border-radius: 6px; 
        cursor: pointer; 
        opacity: .4; 
        -webkit-transition: background .5s, opacity .5s; 
        -moz-transition: background .5s, opacity .5s; 
        transition: background .5s, opacity .5s;
    }
    #carousel .dots li.active 
    {
        background: #fff;
        opacity: 1;
    }
    #carousel .arrow { position: absolute; top: 200px;}
    #carousel #al { left: 15px;}
    #carousel #ar { right: 15px;}
</style>

</head>

<body>

    <!-- 把要轮播的地方写上来 -->
    <div class="banner" id="carousel">
        <ul>
            <li><img src="01.jpg" alt="" width="640" height="480" ></li>
            <li><img src="02.jpg" alt="" width="640" height="480" ></li>
            <li><img src="03.jpg" alt="" width="640" height="480" ></li>
            <li><img src="04.jpg" alt="" width="640" height="480" ></li>
            <li><img src="05.jpg" alt="" width="640" height="480" ></li>
        </ul>

        <!-- 可以点击左右切换 -->
        <!-- <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a>
        <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a> -->
    </div>

    <!-- 最后用js控制 -->
    <script>
        $(document).ready(function(e) {
             $('#carousel').unslider({
                speed: false,   
                delay: 3000,
                complete: function() {}, 
                keys: false,              
                dots: true,
                fluid: true
            });
        });
    </script>

</body>

</html>

unslider配置参数

speed: 500,     // 动画过渡的速度(毫秒),如果不需要过渡效果就设置为false  
delay: 3000,    // 每张幻灯片的间隔时间(毫秒), 如果不是自动播放就设置为false  
init: 0,        // 初始化延迟时间(毫秒),如果不需要延迟就设置为false  
pause: !f,      // 当鼠标指针浮动在当前区域内时是否暂停自动播放  
loop: !f,       // 是否无尽循环播放  
keys: f,        // 是否开启键盘导航  
dots: f,        // 是否显示导航点  
arrows: f,      // 是否显示向前和向后的箭头  
prev: '←',     // 向前按钮中的显示文字(或html片段)  
next: '→',     // 向后......  
fluid: f,       // 是否宽度自适应  
starting: f,    // 在每个动画前调用的函数  
complete: f,    // 在每个动画之后调用的函数  
items: '>ul',   // 幻灯片的容器选择器  
item: '>li',    // 需要滚动的选择器  
easing: 'swing',// 动画的缓动函数(easing function)  
autoplay: true  // 是否允许自动播放 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery卡片式轮是一种通过使用jquery库来实现的片轮效果。它的特点是片以卡片的形式呈现,通过左右箭头或指示器进行切换。以下是一个简单的实现代码示例: ```html <!DOCTYPE html> <html> <head> <title>jQuery卡片式轮</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ var currentSlide = 0; var carouselWidth = $('.carousel').width(); var numSlides = $('.slide').length; function showSlide(slideIndex) { $('.slide').hide(); $('.slide[data-index="' + slideIndex + '"]').show(); } $('.prev').click(function(){ currentSlide--; if (currentSlide < 0) { currentSlide = numSlides - 1; } showSlide(currentSlide); }); $('.next').click(function(){ currentSlide++; if (currentSlide >= numSlides) { currentSlide = 0; } showSlide(currentSlide); }); }); </script> </head> <body> <div class="carousel"> <div class="slide" data-index="0"> <img src="slide1.jpg" alt="Slide 1"> </div> <div class="slide" data-index="1"> <img src="slide2.jpg" alt="Slide 2"> </div> <div class="slide" data-index="2"> <img src="slide3.jpg" alt="Slide 3"> </div> <div class="prev"></div> <div class="next"></div> </div> </body> </html> ``` 请注意,上述代码只是一个简单的示例,你可以根据自己的需求进行修改和扩展。你可以通过调整样式表(styles.css)来改变轮的外观。同时,你还可以添加自动放、指示器等功能来增强轮的交互性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值