jquery鼠标点击图片自动滚动特效代码

jquery鼠标点击图片自动滚动特效代码

jquery实现页面中一个小的区域循环滚动展示图片,并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。有需要的朋友参考下载。

CSS样式
页面需要用到的CSS文件index.css

1
<link rel="stylesheet" type="text/css" href="css/index.css" />

JS代码
在页面引入相关JS文件

1
2
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="n-speed">
    <div class="speed-con main-con clear">
        <div class="n-moban clear">
            <div class="new-menu digua-moban-list">
                <ul class="n-modelList clear" style="margin-top: 0;">
                    <li >
                        <div class="img-shadow"  onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
                            <div class="dg-img-box">
                                <img class="lazy" width="516" height="auto" src="img/cnwebe.jpg" data-original="img/cnwebe.jpg" title="CNWEBE.COM" alt="CNWEBE.COM"/>
                            </div>
                            <div class="interview-box" style="/* display: none; */">
                 <a class="interview-yl fl" target="_blank" href="/ " rel="noopener noreferrer">查看详情</a>
                 <a class="interview-detail fr" data-id="15" data-mc="CNWEBE.COM" data-bh="dg0015" href="javascript:void(0);">复制网站</a>
                            </div>
                         </div>
                     
                    </li>
       
                </ul>

            </div>
           </div>
        </div>
              </div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论