jQuery手机端图片幻灯轮播效果

使用方法：

引入CSS样式文件

<link rel="stylesheet" href="css/style.css">

引入jQuery库文件、插件JS文件

<script src="js/jquery.min.js"></script>
<script src="js/YuxiSlider.jQuery.min.js"></script>

插件初始化、参数配置

$(".slider").YuxiSlider({
    width:800, //容器宽度
    height:450, //容器高度
    control:$('.control'), //绑定控制按钮
    during:4000, //间隔4秒自动滑动
    speed:800, //移动速度0.8秒
    mousewheel:true, //是否开启鼠标滚轮控制
    direkey:true //是否开启左右箭头方向控制
});

HTML结构

<div class="demo">
    <a class="control prev"></a><a class="control next abs"></a><!--自定义按钮，移动端可不写-->
    <div class="slider"><!--主体结构，请用此类名调用插件，此类名可自定义-->
        <ul>
            <li><a href=""><img src="images/1.jpg" alt="两弯似蹙非蹙笼烟眉，一双似喜非喜含情目。" /></a></li>
            <li><a href=""><img src="images/2.jpg" alt="态生两靥之愁，娇袭一身之病。" /></a></li>
            <li><a href=""><img src="images/3.jpg" alt="泪光点点，娇喘微微。" /></a></li>
            <li><a href=""><img src="images/4.jpg" alt="闲静似娇花照水，行动如弱柳扶风。" /></a></li>
            <li><a href=""><img src="images/5.jpg" alt="心较比干多一窍，病如西子胜三分。" /></a></li>
        </ul>
    </div>
</div>