html5手机端图片幻灯片放大展示



125 499 167



特效描述:html5手机端图片 幻灯片放大展示,1.pc和移动端左右滑动切换图片,也可以自动切换 2.点击相应的图片,图片实现放大效果,图片上可以加图片的名字。

代码结构

1. 引入CSS

<link href="css/bs.css" rel="stylesheet">
<link href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/swiper.min.css"/>
<link href="css/index.css" rel="stylesheet">
<link href="css/bs.css" rel="stylesheet">
<link href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/swiper.min.css"/>
<link href="css/index.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bs.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/amazeui.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bs.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/amazeui.min.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="renderer" content="webkit">
    <link rel="icon" href="images/favicon.ico">
    <title></title>
    <style>
        .swiper-slide img {
            width: 100%;
            height: 100px;
        }
    </style>
</head>
<body class="bg-f2">
<div class="container-fluid">
    <div class="row bg-fff personal_x mar-top-10 mar-bot-20">
        <div class="col-xs-12 help_t1  ">
            <!-- 滑动轮播开始-->
            <div class="swiper-container mar-bot-20 mar-top-20">
                <div class="swiper-wrapper">
                    <div class="swiper-slide am am-figure " data-am-widget="figure"  data-am-figure="{  pureview: 'true' }">
                        <img src="images/img1.jpg" alt="标题1"/>
                    </div>
                    <div class="swiper-slide am am-figure " data-am-widget="figure"  data-am-figure="{  pureview: 'true' }">
                        <img src="images/img2.jpg" alt="标题2"/>
                    </div>
                    <div class="swiper-slide am am-figure " data-am-widget="figure"  data-am-figure="{  pureview: 'true' }">
                        <img src="images/img3.jpg" alt="标题3"/>
                    </div>
                </div>
                <!--<div class="swiper-pagination"></div>-->
            </div>
            <!-- 滑动轮播结束-->
        </div>
    </div>
</div>
<!--和代码无关-->
<div class="row">
    <h4>主要实现功能</h4>
    <h6>1.pc和移动端左右滑动切换图片,也可以自动切换</h6>
    <h3>2.点击相应的图片,图片实现放大效果,图片上可以加图片的名字。</h3>
</div>
<!--和代码无关-->
<!-- 轮播 -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 2,         //控制显示几个
        paginationClickable: true,
        spaceBetween: 10,       //控制间距
        loop : true,           //控制是否循环切换
        autoplay: 2000         //控制自动切换的速度
    });
</script>
<!-- 轮播 -->
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash焦点图 弹出层拖动 窗口提示框 缩放放大缩小 缩放切换 焦点图幻灯片 带标题的焦点图 图片放大缩小 layer

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到