• JQuery实现滚动广告


           用JQuery实现简单的滚动广告:

           实现的思想是,定义一个div,div大小跟每张图片的大小一致。在div里面定义两个ul列表,一个用于显示图片,一个用于控制图片.定义div的 overflow值为hidden,使div内只能显示一张图片,然后利用JQuery的animate()实现整个ul的上下移动,使之显示指定的图片。

            HTML代码

            

     1 <div id="d1">
     2             <ul id="adv">
     3                 <li><img src="images/1.jpg" alt="1" />
     4                 </li>
     5                 <li><img src="images/2.jpg" alt="2" />
     6                 </li>
     7                 <li><img src="images/3.jpg" alt="3" />
     8                 </li>
     9                 <li><img src="images/4.jpg" alt="4" />
    10                 </li>
    11                 <li><img src="images/5.jpg" alt="5" />
    12                 </li>
    13             </ul>
    14             <ul id="num">
    15                 <li>
    16                     1
    17                 </li>
    18                 <li>
    19                     2
    20                 </li>
    21                 <li>
    22                     3
    23                 </li>
    24                 <li>
    25                     4
    26                 </li>
    27                 <li>
    28                     5
    29                 </li>
    30             </ul>
    31         </div>

    CSS代码

     1     * {
     2                 margin: 0px;
     3                 padding: 0px;
     4             }
     5             #d1 {
     6                 border: 2px solid #E98C36;
     7                 width: 548px;
     8                 height: 177px;
     9                 margin-left: 30%;
    10                 margin-top: 10%;
    11                 position: relative;
    12                 overflow: hidden;
    13             }
    14             #adv, #num {
    15                 position: absolute;
    16             }
    17             ul li {
    18                 list-style: none;
    19                 display: inline;
    20             }
    21             ul img {
    22                 width: 548px;
    23                 height: 177px;
    24                 display: block;
    25             }
    26             #num {
    27                 right: 5px;
    28                 bottom: 5px;
    29             }
    30             #num li {
    31                 float: left;
    32                 color: #FF7300;
    33                 text-align: center;
    34                 line-height: 16px;
    35                 width: 16px;
    36                 height: 16px;
    37                 font-family: Arial;
    38                 font-size: 12px;
    39                 cursor: pointer;
    40                 overflow: hidden;
    41                 margin: 3px 1px;
    42                 border: 1px solid #FF7300;
    43             }
    44             .on {
    45                 line-height: 21px;
    46                 width: 21px;
    47                 height: 21px;
    48                 font-size: 16px;
    49                 margin: 0 1px;
    50                 border: 0;
    51                 background-color: red;
    52                 font-weight: bold;
    53             }

    JS代码

     1 <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
     2         <script type="text/javascript">
     3             var i = 0;
     4             $(function() {
     5                 //当鼠标移到所有的li下标时
     6                 $("#num li").mouseover(function() {
     7                 //获得当前li的下标
     8                 var index=$("#num li").index(this);
     9                 //调用showImage()完成图片的滚动
    10                 showImage(index);
    11                 }).eq(0).mouseover();
    12                 //加载页面时触发
    13 
    14                 var taskId;
    15                 $("#d1").hover(function(){
    16                 //当鼠标移到图片上时停止滚动
    17                 clearInterval(taskId);
    18                 },function(){
    19                 //当鼠标移走时开始滚动
    20                 taskId=setInterval(function(){
    21                 showImage(i);
    22                 i++;
    23                 if(i==5) i=0;
    24                 },2000);
    25                 }).mouseleave();
    26             });
    27             //完成图片的滚动
    28             function showImage(index) {
    29                 i=index;
    30                 //执行当前的动画,如果之前的动画还没有完成,则立即清除之前的动画
    31                 $("#adv").stop(true).animate({
    32                     top : -177 * index
    33                 }, 1000)
    34                 //当前的li下标,高度显亮;并且使之前显亮的下标恢复原来的颜色
    35                 $("#num li").eq(index).addClass("on").siblings().removeClass("on");
    36             }
    37         </script>
  • 相关阅读:
    HTML ASCII 参考手册
    linux给用户赋予root权限
    Oracle系列教程之一软件安装与卸载
    Office VBA 参考
    Web API 接口参考
    maven setting.xml
    maven仓库网址
    The chance for love doesn't come around every day.
    webstrom使用vue-cli时 遇到的一些问题
    vue2.0 + webpack2.0 配置
  • 原文地址:https://www.cnblogs.com/ArtsCrafts/p/2603790.html
Copyright © 2020-2023  润新知