jQuery图片切换效果

本文介绍了一个使用jQuery实现的图片切换效果案例。通过缩略图点击触发大图淡入淡出,利用jQuery的选择器和动画方法简化了代码实现过程。
这几天刚开始学习jQuery,感觉jQuery确实很强大,下了个CHM的手册,看他的筛选器,属性还有各种方法
感觉不难,几天不碰忘记了,看来还是缺乏练习,还没有真正会用,只是理解怎么回事吧了,所以决定坚持天天练习
自己动手写,
    这个是个简单的图片切换,当然只用js也能很好的实现,但是感觉没有jQuery来的快速直接,尤其是他的选择器很方便,
不用在js里面做循环了呵呵,我做的初衷是实现缩略图单击后图片淡入淡出,但是尝试了很多次没有解决,也不知道问题出在哪里
如果有谁知道,请在评论里面给我指教一下,不胜感激。
效果图入下

代码实现部分
 1$(document).ready(function(){//这里最好不要用$()取代
 2  $(".thumil_img img").hover(
 3     function(){$(this).animate({marginRight:"20"}),"slow"},
 4     function(){$(this).animate({marginRight:"0"}),"slow"}
 5                        )
 6  $(".thumil_img li a").click(function(){
 7    var img_path=$(this).attr("href");
 8    var title=$(this).attr("title");
 9    $("#largeImages").attr({src:img_path}) ;
10    $("#largeImages").fadeIn("slow")
11    $(".title").html(title);
12    return false;//一定要有return false,否则会跳转链接到图片         
13}
)
14}
);
15

 1{
 2  blr:expression(this.onFocus=this.blur())
 3}
/*去除a标点击后的签的虚线,在FF浏览器下不起作用,只好又在a标签里面写入了*/
 4{
 5    margin:0;
 6    padding:0;
 7}

 8#reimg {
 9    margin:0 auto;
10    width:410px;
11    margin-top:200px;
12}

13#largeImages {
14    height:250px;
15    width:400px;
16    display:block;
17    margin-bottom:5px;
18    padding:5px;
19    border:1px #ccc solid;
20}

21.thumil_img {
22    list-style:none;
23    height:20px;
24    margin-bottom:5px;
25    width:200px;
26    display:inline;
27}

28.thumil_img li {
29    float:left;
30    margin-right:5px;
31}

32.thumil_img img {
33    height:20px;
34    padding:2px;
35    border:1px solid #ccc;
36}

37.title {
38    float:right;
39    margin-right:10px;
40    display:block;
41}

42.title p:first-letter {
43    text-transform:uppercase;
44}

1 <div id="reimg"> <img  id="largeImages" src="images/1.jpg" />
2   <ul class="thumil_img">
3     <li><href="images/1.jpg" title="Apple" onFocus="this.blur()"><img src="images/1.jpg" /></a></li>
4     <li><href="images/2.jpg" title="Cool" onFocus="this.blur()"><img src="images/2.jpg" /></a></li>
5     <li><href="images/3.jpg" title="Diamond" onFocus="this.blur()"><img src="images/3.jpg" /></a></li>
6     <li><href="images/4.jpg" title="Color" onFocus="this.blur()"><img src="images/4.jpg" /></a></li>
7   </ul>
8   <span class="title">Apple</span> 
9  </div>

个人签名:天行健,君子以自强不息
内容概要:本文系统介绍了算术优化算法(AOA)的基本原理、核心思想及Python实现方法,并通过图像分割的实际案例展示了其应用价值。AOA是一种基于种群的元启发式算法,其核心思想来源于四则运算,利用乘除运算进行全局勘探,加减运算进行局部开发,通过数学优化器加速函数(MOA)和数学优化概率(MOP)动态控制搜索过程,在全局探索与局部开发之间实现平衡。文章详细解析了算法的初始化、勘探与开发阶段的更新策略,并提供了完整的Python代码实现,结合Rastrigin函数进行测试验证。进一步地,以Flask框架搭建前后端分离系统,将AOA应用于图像分割任务,展示了其在实际工程中的可行性与高效性。最后,通过收敛速度、寻优精度等指标评估算法性能,并提出自适应参数调整、模型优化和并行计算等改进策略。; 适合人群:具备一定Python编程基础和优化算法基础知识的高校学生、科研人员及工程技术人员,尤其适合从事人工智能、图像处理、智能优化等领域的从业者;; 使用场景及目标:①理解元启发式算法的设计思想与实现机制;②掌握AOA在函数优化、图像分割等实际问题中的建模与求解方法;③学习如何将优化算法集成到Web系统中实现工程化应用;④为算法性能评估与改进提供实践参考; 阅读建议:建议读者结合代码逐行调试,深入理解算法流程中MOA与MOP的作用机制,尝试在不同测试函数上运行算法以观察性能差异,并可进一步扩展图像分割模块,引入更复杂的预处理或后处理技术以提升分割效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值