您现在的位置是:首页 > 学无止境> JS网站首页学无止境JS

幻灯片效果

js   幻灯片  
简介

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="zh-cn" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/swiper.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
    <li class="swiper-slide"><a href="#"><img src="images/banner1.jpg" class="img-responsive"/></a></li>
    <li class="swiper-slide"><a href="#"><img src="images/banner2.jpg" class="img-responsive"/></a></li>
    <li class="swiper-slide"><a href="#"><img src="images/banner3.jpg" class="img-responsive"/></a></li>
</ul>
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true
    },
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    }
});
</script>
</body>
</html>

CSS代码:

.swiper-container{margin-top: 1px;}
.swiper-container ul{list-style: none;margin: 0px;padding:0px;}
.swiper-container ul li{margin: 0px;padding:0px;}

文件包下载:    点击下载

Top