swiper+图片自动+无限轮播

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>

    <link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css">
    <script src="swiper/js/swiper-3.4.2.min.js">script>
    <style type="text/css">
       
        .swiper-container {
            width: 900px;
            height: 300px;
        }
    style>
head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide box1"><img  src="img/a.jpg">div>
        <div class="swiper-slide box2" ><img  src="img/b.jpg">div>
        <div class="swiper-slide box3"><img   src="img/c.jpg">div>
    div>
    
    <div class="swiper-pagination">div>

    
    <div class="swiper-button-prev">div>
    <div class="swiper-button-next">div>

    
     
div>

div>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,

        // 如果需要分页器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        autoplay : 1000,
        speed:100,
        // 如果需要滚动条
//         scrollbar: '.swiper-scrollbar',
        effect : 'coverflow',
        slidesPerView: 3,
        centeredSlides: true,
        coverflow: {
            rotate: 30,
            stretch: 10,
            depth: 60,
            modifier: 2,
            slideShadows : true
        }
    })
script>

body>
html>

你可能感兴趣的:(html5)