带左右箭头的大图轮播特效

代码如下：

<div class="demo1">
    <a class="control prev" style="margin-left:18px;"></a><a class="control next abs" style="margin-left:1220px;"></a><!--自定义按钮，移动端可不写-->
    <div class="slider1"><!--主体结构，请用此类名调用插件，此类名可自定义-->
        <ul>
            <li><img src="imges/bg1_1.jpg" /></li>
            <li><img src="imges/bg5_1.jpg" /></li>
            <li><img src="imges/bg6_1.jpg" /></li>
            <li><img src="imges/tu3_1.jpg" /></li>
        </ul>
    </div>
</div>

CSS如下：

.demo1 {width: 1312px;height: 599px;font-size: 14px;position:relative; left:18px;}
.demo1 a.control {position:absolute;display: block;top: 50%;margin-top: -78px;width: 76px;height: 112px;cursor: pointer;z-index: 2;background: url(../imges/buttons.png) no-repeat}
.demo1 a.prev {left: 0;background-position: 0 0}
.demo1 a.next {right: 0;background-position: -76px 0}
.demo1 a.prev:hover {background-position: 0 -112px}
.demo1 a.next:hover {background-position: -76px -112px}
.slider1 {display: none}

JS如下：

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

引用了外部两个jquery 名称为jquery.min.js和YuxiSlider.jQuery.min.js 在http://pan.baidu.com/s/1midOTvi 需要的可以去查看。

效果如下：