鼠标滚动事件下的左右滑动效果实例页面

鼠标放在图片上滚动鼠标滚轮

代码

CSS代码：

.mw_slide{width:558px; height:80px; margin-left:auto; margin-right:auto; overflow:hidden; position:relative;}
.mw_slide_inner{width:2000px; margin:0; padding:0; position:absolute; list-style-type:none;}
.mw_slide_list{width:140px; float:left;}
            

HTML代码：

<div class="mw_slide">
    <ul id="slideBox" class="mw_slide_inner">
        <li class="mw_slide_list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm1.jpg"></li>
        <li class="mw_slide_list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm3.jpg"></li>
        <li class="mw_slide_list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm4.jpg"></li>
        <li class="mw_slide_list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm6.jpg"></li>
        <li class="mw_slide_list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm7.jpg"></li>
        <li class="mw_slide_list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm8.jpg"></li>
        <li class="mw_slide_list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm10.jpg"></li>
    </ul>
</div>
            

JS代码：

var $ = function(id) {
    return document.getElementById(id);
};
seajs.use("/study/201304/slide.js", function(slide) {
    slide.init($("slideBox"));
});