菜菜鸟banner-JQuery处女开发实录----请仔细阅读

最新推荐文章于 2023-08-14 00:23:14 发布

daywrite

最新推荐文章于 2023-08-14 00:23:14 发布

阅读量843

点赞数

文章标签： function jquery插件 jquery border float 2010

本文链接：https://blog.csdn.net/daywrite/article/details/6973312

版权

这篇博客记录了一位新手使用JQuery开发banner的全过程。作者从需求出发，思考并实现了鼠标悬停时图片变化的交互效果，包括渐变功能和自动播放选项。文章详细阐述了每个步骤，包括样式设定、事件监听以及背景颜色变化的处理，并提供了源码供读者参考学习。

摘要由CSDN通过智能技术生成

    写这篇文章的目的，主要是记录自己第一次开发JQuery插件，banner的历程，如有有幸被刚接触JQuery的人看到得到一些小小的感悟，那就是我的成功，本人是个刚接触JQuery的菜鸟，这篇文章也是，看了一个博主的开发，才自己理解。

        首先，JQuery开发不多说，jquery.js文件到处都可以找到，在google和csdn上都有引用我就不多说了！
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>



         课题：公司让你开发一个banner，有具体要求.没办法用现成的，怎么半，这时候就要自己开发，所以我认为这叫开发！
         思考：~~~~~~~~~~~~~~~~~~~~~~~~~~~！
         第一：
*{ margin:0; padding:0;}
ul { list-style:none;}
/*dabai.chen 2010-12-02 banner */
#bannerBox { height:260px; width:540px; overflow:hidden;  position:relative; border:#E7E7E7 solid 1px; background:#FFF; font-size:12px;}
#bannerImgesBox { position:relative; height:270px;}
#bannerImgesBox a { position:absolute; left:0; top:0; text-decoration: none; display:none;}
#bannerImgesBox a img { border:0;}
#bannerTextBox { height:14px; background:url(/images/bannerListBg.jpg) -2px 0; position:absolute; z-index:100; bottom:4px; right:4px; width:536px;}
#bannerTextBox ul { list-style:none;height:16px; float:right;}
#bannerTextBox ul li { float:left; displ ay:inline; height:16px;  text-align:center; width:16px; overflow:hidden; margin-right:1px;}
#bannerTextBox ul li  a