资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
jquery 简单的图片展示效果
<html> <head> <title>jquery练习——简单的图片结果展示效果--cnblogs libsource/</title> <style> #cfoot ul,#cfoot li{ margin:0;padding:0;list-style-type:none; } #cdiv{ width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left; } #cfoot li{ display:inline-block;width:100px;height:100px;line-height:100px;float:left;text-align:center;border:1px solid #D5DDF9;margin-right:20px;cursor:pointer; } #cfoot li.cur{ border:1px solid #ffcc33; } #cleft,#cright{ float:left;text-align:center;width:50px;height:500px;display:inline-block;cursor:pointer; } #cright{ float:right; } .clearfloat{ clear: both;height: 0;font-size: 1px;line-height: 0px; } </style> </head> <body> <div id="cdiv"> <div id="cright">> </div> <div id="cleft">< </div> <div id="cmain"> 图片1 </div> </div> <br class="clearfloat"/> <div id="cfoot"> <ul> <li class="cur" pv="图片1">缩略1</li> <li pv="图片2">缩略2</li> <li pv="图片3">缩略3</li> <li pv="图片4">缩略4</li> <li pv="图片5">缩略5</li> </ul> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery-1.3.2.min.js%22%3E%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%0D%0Afunction%20setContent()%7B%20%0D%0Avar%20curobj%3D%24(%22%23cfoot%20li%5Bpv%5D%3Afirst%22)%3B%20%0D%0Aif(curobj.length%3E0)%20%0D%0A%24(%22%23cmain%22).html(curobj.addClass(%22cur%22).attr('pv'))%3B%20%0D%0A%7D%3B%20%0D%0Afunction%20move(position)%7B%20%0D%0Aposition%3Dposition%7C%7C%22prev%22%3B%20%0D%0Aeval('var%20curobj%3D%24(%22%23cfoot%20li.cur%5Bpv%5D%22)%3Bif(curobj.'%2Bposition%2B'(%22%23cfoot%20li%22).length%3E0)%7B%24(%22%23cmain%22).html%20%0D%0A(curobj.removeClass(%22cur%22).'%2Bposition%2B'(%22%23cfoot%20li%22).addClass(%22cur%22).attr(%22pv%22))%3B%7D')%3B%20%0D%0A%7D%20%0D%0A%24(function()%7B%20%0D%0A%24(document).keydown(function%20(e)%20%7B%20%0D%0Aswitch(e.which)%7B%20%0D%0Acase%2037%3A%20%0D%0Amove('prev')%3B%20%0D%0Abreak%3B%20%0D%0Acase%2039%3A%20%0D%0Amove('next')%3B%20%0D%0Abreak%3B%20%0D%0Adefault%3A%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0A%24(%22%23cleft%22).click(function()%7Bmove('prev')%3B%7D)%3B%20%0D%0A%24(%22%23cright%22).click(function()%7Bmove('next')%3B%7D)%3B%20%0D%0A%24(%22%23cfoot%20li%22).click(function()%7B%20%0D%0A%24(%22%23cfoot%20li.cur%22).removeClass(%22cur%22)%3B%20%0D%0A%24(%22%23cmain%22).html(%24(this).addClass(%22cur%22).attr('pv'))%3B%20%0D%0A%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程