特效介绍
简单的jQuery图片滚动代码,鼠标滑过右下角的控制点,可以让图片平滑滚动,不控制的话,图片自己也会每个3秒滚动一次。
使用方法
1、在head引入下面的代码:<link rel="stylesheet" type="text/css" href="images/index_black.css"> <script src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.js"></script> <script src="images/index2.js"></script>2、在您的产品滚动的区域引入下面的html代码:
<div class="long_block_index"> <div class="js_imgs_block"> <div id="slideshow_wrapper"> <div id="slideshow_photo"> <a style="z-index:2" href="javascript:void(0)" index="1"> <img border=0 src="images/ad01.jpg"> </a> <a style="z-index:1" href="javascript:void(0)" index="2"> <img border=0 src="images/ad02.jpg"> </a> <a style="z-index:1" href="javascript:void(0)" target="_blank" index="3"> <img border=0 imgsrc="images/ad03.jpg"> </a> <a style="z-index:1" href="javascript:void(0)" index="4"> <img border=0 imgsrc="images/ad04.jpg"> </a> <a style="z-index:1" href="javascript:void(0)" index="5"> <img border=0 imgsrc="images/ad05.jpg"> </a> </div> <div id="slideshow_footbar"></div> </div> </div> </div> <div class="survey_block_index"> <div class="title_survey_block_index"> <ul class="scrollUl"> <a id="m01" class="sd01" href="javascript:void(0)"></a> <a id="m02" class="sd02" href="javascript:void(0)"></a> <a style="BaCKGROUND-IMaGE: none" id="m03" class="sd03" href="javascript:void(0)"></a> </ul> </div> </div>注:自动滚动时间请打开index2.js,找到下面代码:
setInterval(function() { if (indexAllowAutoSlide) slideDown(); },3000);将3000改成你想要的时间,单位是毫秒。