帶左右箭頭的大圖輪播特效

代碼如下：

<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({
    width: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 需要的可以去查看。

效果如下：