unslider 实现图片轮播

来源：互联网发布：淘宝如何退货编辑：程序博客网时间：2024/04/30 08:26

效果图
1.请先下载所需css js文件

下载链接[http://unslider.com/](http://unslider.com/)jquery文件非此下载路径<!--若无需图片黑色标记部分功能无需引入unslider-dots.css样式文件--><link rel="stylesheet" type="text/css" href="res/slider/css/unslider-dots.css"><link rel="stylesheet" type="text/css" href="res/slider/css/unslider.css">若需实现图片黑色框标记部分单独自己添加样式代码.unslider {    overflow: auto;    margin: 0;    padding: 0;    /*Added*/    position: relative;}.unslider-nav{    position: absolute;    width: 100%;    bottom: 2%;}<script src="res/webapp/js/jquery-2.1.4.min.js"></script><script type="text/javascript" src="res/slider/jquery.event.move.js"></script><script type="text/javascript" src="res/slider/jquery.event.swipe.js"></script>jquery.event.move.js jquery.event.swipe.js若无需滑动支持可以无须引入<script type="text/javascript" src="res/slider/unslider-min.js"></script>

<div class="banner" id="home_banner">            <ul>                <li data-slide="0"><img alt=""                    src="res/scmc/img/mobile/discovery/banner/1.png"></li>                <li data-slide="1"><img alt=""                    src="res/scmc/img/mobile/discovery/banner/2.png"></li>                <li data-slide="2"><img alt=""                    src="res/scmc/img/mobile/discovery/banner/3.png"></li>            </ul></div>

$(document).ready(function() {            var slider = $('.banner').unslider({                speed : 500,                delay : 4000,                nav : true,//是否启动导航图标                dots: true,//是否出先圆点点                arrows : false,                autoplay : true //自动轮播            });    });

0 0