js带缩略图的图片轮播效果代码分享

2016-07-01 12:18:33 88必发客户端

本文实例讲述了js带缩略图的图片轮播效果。分享给大家供大家参考。具体如下:这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单。运行效果图:-------------------查看效果 下载源码-------------------小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。在head区域引入CSS样式:<link href="css/jb51.net.css" rel="stylesheet" type="text/css" >为大家分享的JS带缩略图的5屏轮换焦点图特效代码如下<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS带缩略图的5屏轮换焦点图</title><link href="css/jb51.net.css" rel="stylesheet" type="text/css" ><script type="text/javascript" src="js/show.js"></script></head><body><div id="p7ssm"> <div id="p7ssm_cf"> </div> <div id="p7ssm_loading"><img src="images/loading.gif" alt="" width="78" height="8" /></div> <table id="p7ssm_fstbl" border="0" cellpadding="0" cellspacing="0" summary="Fullsize Image"> <tr> <td><div id="p7ssm_fullsize"> <div id="p7ssm_fsc"> <div id="p7ssm_fsw"> <div id="p7ssm_fsimg"><a href="javascript:;" id="p7ssm_fslink"><img src="images/biaozhi.gif" alt="" name="p7ssm_im" width="390" height="245" border="0" id="p7ssm_im" /></a></div> <div id="p7ssm_description"></div> </div> </div> </div></td> </tr> </table> <div id="p7SSMwhmb"> <div id="p7ssm_thumbs"> <div id="p7SSMwp_1"> <div class="p7ssm_thumb_section"> <ul><!-- 修改内容开始 --> <li><a href="images/001.jpg"> <img src="images/001.jpg" alt="《福娃奥运漫游记》获动漫大赛最佳作品奖" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div> <div class="p7ssm_fd">《福娃奥运漫游记》获动漫大赛最佳作品奖</div> </li> <li><a href="images/002.jpg"> <img src="images/002.jpg" alt="超级插画设计 3D机器人与平面相结合" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div> <div class="p7ssm_fd">超级插画设计 3D机器人与平面相结合</div> </li> <li><a href="images/003.jpg"> <img src="images/003.jpg" alt="洁净舒适的XP桌面壁纸 轻松愉快的环境" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div> <div class="p7ssm_fd">洁净舒适的XP桌面壁纸 轻松愉快的环境</div> </li> <li><a href="images/004.jpg"> <img src="images/004.jpg" alt="室内装修三维设计 创造简洁舒适" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div> <div class="p7ssm_fd">室内装修三维设计 创造简洁舒适</div> </li> <li><a href="images/005.jpg"> <img src="images/005.jpg" alt="世界上令人叹为观止的仿真的机器人" width="390" height="245" /></a> <div class="p7ssm_lk"><a href="http://www.jb51.net/">点击查看详情</a></div> <div class="p7ssm_fd">世界上令人叹为观止的仿真的机器人</div> </li> <!-- 修改内容结束 --></ul> <br class="p7ssm_clearThumbs" /> </div> </div> </div> </div> <div id="p7ssm_toolbar"> <div class="p7ssm_sectionTrigger"><a id="p7SSMtp_1" href="#">New Image Set</a></div> <div id="p7ssm_dragbar" title="Move"><span>Move</span></div> <div id="p7ssm_preview"> <table summary="Thumbnail Preview"> <tr> <td><img src="images/biaozhi.gif" alt="" /></td> </tr> </table> </div> <div id="p7ssm_tools"> <table border="0" cellpadding="0" cellspacing="0" summary="Slideshow Toolbar"> <tr> <td><div id="p7ssm_nav_wrapper"><a id="p7SSMtnav" href="#" title="Menu"><em>Navigate</em></a> <div id="p7SSMwnav"> <div id="p7ssm_navList"> <ul> <li></li> </ul> </div> </div> </div></td> <td><a href="#" title="Hide or Show Thumbnails" id="p7SSMthmb"><em>Hide Thumbs</em></a></td> <td><a href="#" id="p7ssm_first" title="First Image"><em>First</em></a></td> <td><a href="#" id="p7ssm_prev" title="Previous Image"><em>Previous</em></a></td> <td><a href="#" id="p7ssm_pp" class="p7ssm_pause" title="Pause"><em>Pause</em></a></td> <td><a href="#" id="p7ssm_next" title="Next Image"><em>Next</em></a></td> <td><a href="#" id="p7ssm_last" title="Last Image"><em>Last</em></a></td> <td><div id="p7ssm_slidechannel"> <div id="p7ssm_slider"><a href="#" id="p7ssm_slidebar" title="Speed:"><em>Set Speed</em></a></div> </div></td> </tr> </table> </div> </div><!--[if IE 7]><style>#p7ssm, #p7ssm div {zoom: 1;}</style><![endif]--><!--[if IE 6]><style>#p7ssm a, #p7ssm, #p7ssm div, #p7ssm_thumb_wrapper {zoom: 1;}.p7ssm_thumb_section {padding-right: 0; padding-left: 0;}.p7ssm_thumb_section a {float: left;}</style><![endif]--><!--[if IE 5]><style>#p7ssm {}.p7ssm_sectionTrigger {text-align: left;}#p7ssm_navList li {float: left; clear:both; width: 100%;}#p7ssm, #p7ssm_w1, #p7ssm_w2, #p7ssm_description, #p7ssm_preview,#p7ssm_navList a, .p7ssm_sectionTrigger a, #p7ssm_thumbs,.p7ssm_thumb_section, #p7ssm_fsw {height: 1%;}.p7ssm_thumb_section {padding: 0;}</style><![endif]--><!--[if IE 5.5000]><style>#p7ssm, #p7ssm_w1, #p7ssm_w2 {zoom: 1;}</style><![endif]--><script type="text/javascript"><!--P7_SSMinit(1,1,1,1,0,1,1,1,5);//--></script></div><br><br><div align="center"> <p align="center"></p> <p align="center"></p> <p> </p></div></body></html>以上就是为大家分享的js带缩略图的图片轮播效果代码,希望大家可以喜欢,并应用到实践中。

示例代码很简单,直接奉上,就不多废话了复制代码 代码如下:<html> <head> <title>denotoggle</title> <style> #box {     width: 100px;     height: 100PX;     background-color: #ddd } .show {     visibility: hidden; } </style> <script src="jquery/1.8.2/jquery.min.js"></script> <!-- //java script方法 --> <script type="text/javascript">     window.onload = function() {         function toglemain() {             var obj = document.getElementById("box");             if (obj.className == "") {                 obj.className = "show";             } else {                 obj.className = "";             }         }         var clickbutton = document.getElementById("toggle");         clickbutton.onclick = toglemain; //OnClick方法与Click事件 点击一下Button,实际上是先执行OnClick方法,但是问什么,同时还出发了Click事件呢?这是因为,OnClick方法内部触发了Click事件。     } </script> <!-- //jQuery Toggle方法 --> <script type="text/javascript">     $(document).ready(function() {         $(".btn1").click(function() {             /* $("p#box").toggle(); */             $("#box").toggleClass("show");         });     }); </script> </head> <body>     <div id="box"></div>     <button id="toggle">javascript toggle</button>     <button class="btn1">jQuery Toggle</button> </body> </html> 小伙伴们是否了解清楚了Javascript与jQuery方法的隐藏与显示的方法了呢,需要的小伙伴自己来拿走吧。

1、问题背景有几个多选框,选择其中的几个,获取选中的值2、设计结果如下图所示:3、设计源码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery获取checkbox选中的值</title> <script type="text/javascript" src="jquery-2.2.0.js"></script> <script type="text/javascript"> $(function(){ $("input[name='ckb']:checkbox").click(function() { var str = ""; $("input[name='ckb']:checkbox").each(function() { if($(this).is(":checked")) { str += $(this).attr("value")+","; } }); if(str != null && str.length > 1) { str = str.substring(0,str.length-1); } alert(str); }); }); </script> </head> <body> <input type="checkbox" name="ckb" value="1"/>苹果 <input type="checkbox" name="ckb" value="2"/>橘子 <input type="checkbox" name="ckb" value="3"/>梨子 <input type="checkbox" name="ckb" value="4"/>香蕉 </body> </html> 下面给大家分享一段代码关于jQuery操作CheckBox的方法(选中,取消,取值)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New document.nbsp;</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script> <SCRIPT LANGUAGE="javascript"> <!-- $("document.quot;).ready(function(){ $("#btn1").click(function(){ $("[name='checkbox']").attr("checked",'true');//全选 }) $("#btn2").click(function(){ $("[name='checkbox']").removeAttr("checked");//取消全选 }) $("#btn3").click(function(){ $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 }) $("#btn4").click(function(){ $("[name='checkbox']").each(function(){ if($(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked",'true'); } }) }) $("#btn5").click(function(){ var str=""; $("[name='checkbox'][checked]").each(function(){ str+=$(this).val()+""r"n"; //alert($(this).val()); }) alert(str); }) }) //--> </SCRIPT> </HEAD> <BODY> <form name="form1" method="post" action=""> <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="取消全选"> <input type="button" id="btn3" value="选中所有奇数"> <input type="button" id="btn4" value="反选"> <input type="button" id="btn5" value="获得选中的所有值"> <br> <input type="checkbox" name="checkbox" value="checkbox1"> checkbox1 <input type="checkbox" name="checkbox" value="checkbox2"> checkbox2 <input type="checkbox" name="checkbox" value="checkbox3"> checkbox3 <input type="checkbox" name="checkbox" value="checkbox4"> checkbox4 <input type="checkbox" name="checkbox" value="checkbox5"> checkbox5 <input type="checkbox" name="checkbox" value="checkbox6"> checkbox6 <input type="checkbox" name="checkbox" value="checkbox7"> checkbox7 <input type="checkbox" name="checkbox" value="checkbox8"> checkbox8 </form> 以上所述是小编给大家分享的jQuery获取checkbox选中的值,希望对大家有所帮助。

1. 什么是同源策略     理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。    何谓同源:        URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。   同源策略:        浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。 (白帽子讲web安全[1])        从一个域上加载的脚本不允许访问另外一个域的文档属性。    举个例子:        比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。    在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容。    另外同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。    代码示例(http://localhost:8080/和http://localhost:8081由于端口不同而不同源):http://localhost:8080/test.html <html> <head><title>test same origin policy</title></head> <body> <iframe id="test" src="http://localhost:8081/test2.html"></iframe> <script type="text/javascript"> document.getElementById("test").contentDocument.body.innerHTML = "write somthing"; </script> </body> </html> http://localhost:8081/test2.html <html> <head><title>test same origin policy</title></head> <body> Testing. </body> </html>     在Firefox中会得到如下错误:        Error: Permission denied to access property 'body'    Document对象的domain属性存放着装载文档的服务器的主机名,可以设置它。    例如来自"blog.csdn.net"和来自"bbs.csdn.net"的页面,都将document.domain设置为"csdn.net",则来自两个子域名的脚本即可相互访问。    出于安全的考虑,不能设置为其他主domain,比如http://www.csdn.net/不能设置为sina.com2. Ajax跨域    Ajax (XMLHttpRequest)请求受到同源策略的限制。    Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpRequest是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,用户不易察觉。    因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制。    举个例子:        假设某网站引用了其它站点的javascript,这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点,这样就可以源源不断收集信息。        或者某网站因为存在漏洞导致XSS注入了javascript脚本,这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点,这样就可以源源不断收集信息。   如果我们又想利用XMLHTTP的无刷新异步交互能力,又不愿意公然突破Javascript的安全策略,可以选择的方案就是给XMLHTTP加上严格的同源限制。   这样的安全策略,很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据,而XMLHTTP则根本上限制了跨域请求的提交。(实际上下面提到了CORS已经放宽了限制)   随着Ajax技术和网络服务的发展,对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。    2.1 JSONP    JSONP技术实际和Ajax没有关系。我们知道<script>标签可以加载跨域的javascript脚本,并且被加载的脚本和当前文档属于同一个域。因此在文档中可以调用/访问脚本中的数据和函数。如果javascript脚本中的数据是动态生成的,那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。    JSONP就是利用<script>标签的跨域能力实现跨域数据的访问,请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。其中callback函数本地文档的JavaScript函数,服务器端动态生成的脚本会产生数据,并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时,callback函数就被调用。    第一个站点的测试页面(http://localhost:8080/test.html): <script src="http://localhost:8081/test_data.js"> <script> function test_handler(data) { console.log(data); } </script>     服务器端的Javascript脚本(http://localhost:8081/test_data.js):test_handler('{"data": "something"}');    为了动态实现JSONP请求,可以使用Javascript动态插入<script>标签:<script type="text/javascript"> // this shows dynamic script insertion var script = document.createElement('script'); script.setAttribute('src', url); // load the script document.getElementsByTagName('head')[0].appendChild(script); </script>         JSONP协议封装了上述步骤,jQuery中统一是现在AJAX中(其中data type为JSONP):    http://localhost:8080/test?callback=test_handler    为了支持JSONP协议,服务器端必须提供特别的支持[2],另外JSONP只支持GET请求。2.2 Proxy     使用代理方式跨域更加直接,因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的,就不存在跨域问题了。    使用本方法跨域步骤如下:    1. 把访问其它域的请求替换为本域的请求    2. 本域的请求是服务器端的动态脚本负责转发实际的请求    各种服务器的Reverse Proxy功能都可以非常方便的实现请求的转发,如Apache httpd + mod_proxy。    Eg.    为了通过Ajax从http://localhost:8080访问http://localhost:8081/api,可以将请求发往http://localhost:8080/api。    然后利用Apache Web服务器的Reverse Proxy功能做如下配置:        ProxyPass /api http://localhost:8081/api2.3 CORS2.3.1 Cross origin resource sharing       “Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. It is more powerful than only allowing same-origin requests, but it is more secure than simply allowing all such cross-origin requests.” ----Wikipedia[3]   通过在HTTP Header中加入扩展字段,服务器在相应网页头部加入字段表示允许访问的domain和HTTP method,客户端检查自己的域是否在允许列表中,决定是否处理响应。   实现的基础是JavaScript不能够操作HTTP Header。某些浏览器插件实际上是具有这个能力的。   服务器端在HTTP的响应头中加入(页面层次的控制模式):   Access-Control-Allow-Origin: example.com   Access-Control-Request-Method: GET, POST   Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin   Access-Control-Expose-Headers: Content-Range   Access-Control-Max-Age: 3600   多个域名之间用逗号分隔,表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。   客户端可以有两种行为:   1. 发送OPTIONS请求,请求Access-Control信息。如果自己的域名在允许的访问列表中,则发送真正的请求,否则放弃请求发送。   2. 直接发送请求,然后检查response的Access-Control信息,如果自己的域名在允许的访问列表中,则读取response body,否则放弃。   本质上服务端的response内容已经到达本地,JavaScript决定是否要去读取。 Support: [Javascript Web Applications] * IE >= 8 (需要安装caveat) * Firefox >= 3 * Safari 完全支持 * Chrome 完全支持 * Opera 不支持 2.3.2 测试   测试页面http://localhost:8080/test3.html使用jquery发送Ajax请求。<html> <head><title>testing cross sop</title></head> <body> Testing. <script src="jquery-2.0.0.min.js"></script> <script type='text/javascript'> $.ajax({ url: 'http://localhost:8000/hello', success: function(data) { alert(data); }, error: function() { alert('error'); } }); </script> </body> </html>     测试Restful API(http://localhost:8000/hello/{name})使用bottle.py来host。 from bottle import route, run, response @route('/hello') def index(): return 'Hello World.' run(host='localhost', port=8000)    测试1:        测试正常的跨域请求的行为。    测试结果:        1. 跨域GET请求已经发出,请求header中带有            Origin    http://localhost:8080        2. 服务器端正确给出response        3. Javascript拒绝读取数据,在firebug中发现reponse为空,并且触发error回调    测试2:        测试支持CORS的服务器的跨域请求行为。        对Restful API做如下改动,在response中加入header:             def index():                #Add CORS header#                response.set_header("Access-Control-Allow-Origin", "http://localhost:8080")                return 'Hello World.'    测试结果:        1. 跨域GET请求已经发出,请求header中带有            Origin    http://localhost:8080        2. 服务器端正确给出response        3. 客户端正常获取数据    测试3:        测试OPTIONS请求获取CORS信息。        对客户端的Ajax请求增加header:       $.ajax({ url: 'http://localhost:8000/hello', headers: {'Content-Type': 'text/html'}, success: function(data) { alert(data); }, error: function() { alert('error'); } });         对Restful API做如下改动: @route('/hello', method = ['OPTIONS', 'GET']) def index(): if request.method == 'OPTIONS': return '' return 'Hello World.'    测试结果:    1. Ajax函数会首先发送OPTIONS请求    2. 针对OPTIONS请求服务器    3. 客户端发现没有CORS header后不会发送GET请求    测试4:        增加服务器端对OPTIONS方法的处理。        对Restful API做如下改动: @route('/hello', method = ['OPTIONS', 'GET']) def index(): response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080' response.headers['Access-Control-Allow-Methods'] = 'GET, OPTIONS' response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type' if request.method == 'OPTIONS': return '' return 'Hello World.'    测试结果:        1. Ajax函数会首先发送OPTIONS请求        2. 针对OPTIONS请求服务器        3. 客户端匹配CORS header中的allow headers and orgin后会正确发送GET请求并获取结果      测试发现,Access-Control-Allow-Headers是必须的。   CORS协议提升了Ajax的跨域能力,但也增加了风险。一旦网站被注入脚本或XSS攻击,将非常方便的获取用户信息并悄悄传递出去。4. Cookie 同源策略    Cookie中的同源只关注域名,忽略协议和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。5. Flash/SilverLight跨域    浏览器的各种插件也存在跨域需求。通常是通过在服务器配置crossdomain.xml[4],设置本服务允许哪些域名的跨域访问。    客户端会首先请求此文件,如果发现自己的域名在访问列表里,就发起真正的请求,否则不发送请求。 <?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-access-from domain="*"/> <allow-http-request-headers-from domain="*" headers="*"/> </cross-domain-policy>    通常crossdomain.xml放置在网站根目录。6. 总结     互联网的发展催生了跨域访问的需求,各种跨域方法和协议满足了需求但也增加了各种风险。尤其是XSS和CSRF等攻击的盛行也得益于此。    了解这些技术背景有助于在实际项目中熟练应用并规避各种安全风险。

php有个很方便的用法是在定义函数时可以直接给参数设默认值,如: 复制代码 代码如下: function simue ($a=1,$b=2){ return $a+$b; } echo simue(); //输出3 echo simue(10); //输出12 echo simue(10,20); //输出30 但js却不能这么定义,如果写function simue(a=1,b=2){}会提示缺少对象。 js函数中有个储存参数的数组arguments ,所有函数获得的参数会被编译器挨个保存到这个数组中。于是我们的js版支持参数默认值的函数可以通过另外一种变通的方法实现,修改上例: 复制代码 代码如下: function simue (){ var a = arguments[0] ? arguments[0] : 1; var b = arguments[1] ? arguments[1] : 2; return a+b; } alert( simue() ); //输出3 alert( simue(10) ); //输出12 alert( simue(10,