这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 JQ 实现新浪游戏首页幻灯片, 需要的朋友可以参考下
下面通过图文并茂的方式给大家展示下,JQ 实现新浪游戏首页幻灯片代码,具体实现方式如下:
分享一款基于 jQuery 的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的 jQuery 幻灯片代码。效果图如下:
html 代码:
- <br>
- <center>
- <div class='Homeslide'>
- <div class='Homeslide_bigwrap'>
- <div class='Homeslide_hand0'>
- </div>
- <div class='Homeslide_hand1'>
- </div>
- <a target='_blank' class='Homeslide_bigpicdiv_mask'>
- loading...
- </a>
- <div class='Homeslide_bigpicdiv'>
- <a href='#' target='_blank'>
- <img src="">
- </a>
- </div>
- <div class='Homeslide_detail'>
- <p>
- loading...
- </p>
- <div class='Homeslide_ralate'>
- loading...
- </div>
- </div>
- </div>
- <div class='Homeslide_thumb'>
- <ul>
- loading...
- </ul>
- </div>
- </div>
- </center>
- <script type="text/javascript">
- //data
- var home_slide_data = [{
- "title": "站长素材",
- "url": "http:\/\/sc.chinaz.com\/",
- "subtitle": "\u8f66\u6a21\u81ea\u7206\u6c89\u8ff7LOL",
- "image": "images\/mB6w-fxesftz6773752.jpg",
- "thumb": "images\/vhPm-fxesfuc3549394.jpg",
- "summary": "2015\u5e74CJ\u5373\u5c06\u5f00\u5e55\u5728\u5373\uff0c\u867d\u7136\u7531\u4e8e\u79cd\u79cd\u65b0\u89c4\uff0c\u6211\u4eec\u53ef\u80fd\u518d\u4e5f\u89c1\u4e0d\u5230\u79cd\u79cd\u798f\u5229",
- "related_title_1": "\u6d77\u8d3c\u5973\u5e1d\u5199\u771f",
- "related_image_1": "http:\/\/sc.chinaz.com\/",
- "related_title_2": "\u5973\u661f\u4ee3\u8a00\u624b\u6e38",
- "related_image_2": "http:\/\/sc.chinaz.com\/",
- "mark": "0"
- },
- {
- "title": "App Store\u7f16\u8f91\u63a8\u8350\u516d\u6708\u6700\u4f73\u6e38\u620f\u76d8\u70b9",
- "url": "http:\/\/sc.chinaz.com\/",
- "subtitle": "\u516d\u6708\u6700\u4f73\u624b\u6e38\u76d8\u70b9",
- "image": "images\/Hv1z-fxesfty0407358.jpg",
- "thumb": "images\/T4s2-fxesssr5451139.jpg",
- "summary": "\u6bcf\u6708App Store\u7684\u7f16\u8f91\u90fd\u4f1a\u5728\u5f53\u6708\u6700\u4ee4\u4eba\u96be\u5fd8\u3001\u5236\u4f5c\u6700\u7cbe\u826f\u7684\u65b0\u4f5c\u4e2d\u627e\u51fa\u6700\u68d2\u7684\u6e38\u620f\uff0c\u4e0b\u9762\u8ba9\u6211\u4e00\u8d77\u6765\u770b\u770b\u6709\u54ea\u4e9b\u6e38\u620f\u5165\u9009\u516d\u6708\u6700\u4f73\u5462\uff1f",
- "related_title_1": "\u5200\u950b\u9177\u8dd1",
- "related_image_1": "http:\/\/sc.chinaz.com\/",
- "related_title_2": "\u8f90\u5c04\u907f\u96be\u6240",
- "related_image_2": "http:\/\/sc.chinaz.com\/",
- "mark": "0"
- },
- {
- "title": "\u9b54\u517d\u4e16\u754c\u7535\u5f71\u9884\u544a\u7247 7\u670811\u65e5\u4eae\u76f8\u5723\u5730\u4e9a\u54e5\u52a8\u6f2b\u5c55",
- "url": "http:\/\/sc.chinaz.com\/",
- "subtitle": "\u9b54\u517d\u7535\u5f71\u5468\u516d\u516c\u5e03",
- "image": "images\/lwuY-fxesfty0408487.jpg",
- "thumb": "images\/vfi3-fxesfuc3551167.jpg",
- "summary": "\u6765\u81ea\u4e8eEntertainment Weekly\u7684\u6700\u65b0\u6d88\u606f\uff0c\u9b54\u517d\u4e16\u754c\u7535\u5f71\u5c06\u4e8e7\u670811\u65e5\u7684\u5723\u5730\u4e9a\u54e5\u56fd\u9645\u52a8\u6f2b\u5c55\u4e0a\u516c\u5e03\u3002",
- "related_title_1": "\u9ed1\u6697\u4e4b\u95e8\u6d77\u62a5",
- "related_image_1": "http:\/\/sc.chinaz.com\/",
- "related_title_2": "\u5bfc\u6f14COS\u517d\u4eba",
- "related_image_2": "http:\/\/sc.chinaz.com\/",
- "mark": "0"
- },
- {
- "title": "G\u676f\u6e38\u620f\u5973\u795e\u5353\u6bd3\u5f64\u8fd1\u65e5\u7ed9\u529b\u79c1\u7167 \u5f15\u5b85\u7537\u75af\u72c2\u55b7\u8840",
- "url": "http:\/\/sc.chinaz.com\/",
- "subtitle": "\u6e38\u620f\u5973\u795e\u7ed9\u529b\u79c1\u7167",
- "image": "images\/-Gtx-fxesftz6781939.jpg",
- "thumb": "images\/vJpT-fxesftz6781941.jpg",
- "summary": "\u8fd1\u65e5\u6211\u4eec\u7684\u5973\u795e\u53c8\u4e3a\u5b85\u7537\u4eec\u653e\u9001\u4e86\u4e00\u5927\u6ce2\u7ed9\u529b\u79c1\u7167\uff0c\u5f15\u5f97\u5b85\u7537\u73a9\u5bb6\u53e3\u6c34\u6d9f\u6d9f\uff0c\u5c0f\u4f19\u4f34\u4eec\u968f\u7740\u5c0f\u7f16\u4e00\u8d77\u6765\u6b23\u8d4f\u5427\uff01",
- "related_title_1": "\u4ee3\u8a00\u6e38\u620f\u8d70\u7ea2",
- "related_image_1": "http:\/\/sc.chinaz.com\/",
- "related_title_2": "\u5b85\u7537\u7f8e\u80f8\u5973\u795e",
- "related_image_2": "http:\/\/sc.chinaz.com\/",
- "mark": "0"
- },
- {
- "title": "\u4e00\u5468\u624b\u6e38\u5f00\u6d4b\u9884\u544a\uff1a\u300a\u4e5d\u9634\u771f\u7ecf\u300b\u5220\u6863\u6d4b\u8bd5",
- "url": "http:\/\/sc.chinaz.com\/",
- "subtitle": "\u7f8e\u56fd\u5927\u7247\u6539\u7f16\u624b\u6e38",
- "image": "images\/znaY-fxesfty0426946.jpg",
- "thumb": "images\/xOeg-fxesfuc3555437.jpg",
- "summary": "\u53c8\u5230\u4e86\u4e00\u5468\u5f00\u6d4b\u624b\u6e38\u63a8\u8350\u7684\u65f6\u95f4\uff0c\u4f60\u51c6\u5907\u597d\u4e86\u5417\uff01\u672c\u5468\u5f00\u6d4b\u7684\u624b\u6e38\u79cd\u7c7b\u7e41\u591a\uff0c\u6709\u89d2\u8272\u626e\u6f14\u7c7b\u4e5d\u9634\u771f\u7ecf\u548c\u82cd\u7a79\u53d8",
- "related_title_1": "\u4e5d\u9634\u771f\u7ecf",
- "related_image_1": "http:\/\/sc.chinaz.com\/",
- "related_title_2": "\u7edd\u5730\u6218\u8b66",
- "related_image_2": "http:\/\/sc.chinaz.com\/",
- "mark": "0"
- },
- {
- "title": "\u300a\u5251\u6e7e\u4f20\u5947\u300b\u516c\u5e03\u5168\u65b0\u6e38\u620f\u6f14\u793a \u73a9\u5bb6\u53ef\u81ea\u5df1\u5efa\u5730\u4e0b\u57ce",
- "url": "http:\/\/sc.chinaz.com\/",
- "subtitle": "\u5251\u6e7e\u4f20\u5947\u6700\u65b0\u89c6\u9891",
- "image": "images\/_UYH-fxesfty0422934.jpg",
- "thumb": "images\/ohtY-fxesssr5454722.jpg",
- "summary": "\u300a\u5251\u6e7e\u4f20\u5947\u300b\u4eca\u5929\u516c\u5e03\u4e86\u5168\u65b0\u7684\u6e38\u620f\u89c6\u9891\uff0c\u5c55\u793a\u4e86\u6e38\u620f\u4e2d\u6781\u4e3a\u7075\u6d3b\u7684\u6218\u5f79\u521b\u5efa\u5de5\u5177\u548c\u526f\u672c\u5927\u5e08\u6e38\u620f\u8fc7\u7a0b",
- "related_title_1": "\u65b0\u6e38\u620f\u6a21\u5f0f",
- "related_image_1": "http:\/\/sc.chinaz.com\/",
- "related_title_2": "\u5b9e\u673a\u6e38\u620f\u89c6\u9891",
- "related_image_2": "http:\/\/sc.chinaz.com\/",
- "mark": "0"
- },
- {
- "title": "\u300a\u6211\u7684\u4e16\u754c\uff1a\u6545\u4e8b\u6a21\u5f0f\u300b\u5ba3\u4f20\u89c6\u9891\u9996\u66dd",
- "url": "http:\/\/sc.chinaz.com\/",
- "subtitle": "\u6211\u7684\u4e16\u754c\u6545\u4e8b\u6a21\u5f0f",
- "image": "images\/ui2t-fxesftz6772647.jpg",
- "thumb": "images\/nvsq-fxesftz6772653.jpg",
- "summary": "\u300a\u6211\u7684\u4e16\u754c\u300b\u53ef\u8c13\u65f6\u4e0b\u6700\u70ed\u95e8\u7684\u6e38\u620f\uff0c\u51ed\u501f\u7740\u8fd9\u6b3e\u795e\u4f5c\uff0cMojang \u540d\u58f0\u5927\u632f\uff0c\u5fae\u8f6f\u751a\u81f3\u65a5\u5de8\u8d44\u5c06\u5176\u6536\u8d2d",
- "related_title_1": "\u767b\u5f55WIN10",
- "related_image_1": "http:\/\/sc.chinaz.com\/",
- "related_title_2": "\u94f6\u9b42\u4e71\u5165",
- "related_image_2": "http:\/\/sc.chinaz.com\/",
- "mark": "0"
- },
- {
- "title": "站长素材",
- "url": "http:\/\/sc.chinaz.com\/ ",
- "subtitle": "\u519b\u653f\u6218\u7565\u624b\u6e38\u66dd\u5149",
- "image": "images\/fcRo-fxesfuc3549534.jpg",
- "thumb": "images\/JHpf-fxesftz6773913.jpg",
- "summary": "\u4e71\u4e16\u4e89\u9738\uff0c\u91d1\u6208\u94c1\u9a6c\uff0c\u6562\u95ee\u8c01\u80fd\u4e00\u7edf\u5c71\u6cb3\uff1f\u5982\u4eca\uff0c\u65b0\u7684\u5386\u53f2\u5373\u5c06\u7531\u4f60\u4e66\u5199\uff0c\u519b\u653f\u6218\u7565\u624b\u6e38\u300a\u7387\u571f\u4e4b\u6ee8\u300b\u5373\u5c06\u5c01\u6d4b\uff01",
- "related_title_1": "\u9ad8\u901f\u6e38\u620f\u4e0b\u8f7d",
- "related_image_1": "http:\/\/sc.chinaz.com\/",
- "related_title_2": "\u66f4\u591a\u624b\u6e38\u8d44\u8baf",
- "related_image_2": "http:\/\/sc.chinaz.com\/",
- "mark": "0"
- }];
- //console.log(home_slide_data);
- //实例化...................................
- $('.Homeslide').homeslide(home_slide_data, true, 3000);
- </script>
CSS 代码:
- /*通用全局设定*/
- body,
- input,
- button,
- select,
- textarea,
- table {
- font: 12px "Microsoft YaHei",
- "微软雅黑",
- "SimSun",
- "宋体";
- }
- body,
- div,
- dl,
- dt,
- dd,
- ul,
- ol,
- li,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- pre,
- code,
- form,
- fieldset,
- legend,
- input,
- textarea,
- p,
- blockquote,
- th,
- td,
- hr,
- button,
- article,
- aside,
- details,
- figcaption,
- figure,
- footer,
- header,
- hgroup,
- menu,
- nav,
- section {
- margin: 0;
- padding: 0;
- }
- fieldset,
- img {
- border: 0;
- }
- table {
- border - collapse: collapse;
- border - spacing: 0;
- }
- ol,
- ul {
- list - style: none;
- }
- input,
- button,
- select,
- textarea {
- outline: none;
- }
- textarea {
- resize: none;
- }
- a: link,
- a: visited,
- a: hover,
- a: active {
- text - decoration: none;
- }
- /*幻灯*/
- .Homeslide {
- width: 490px;
- height: 425px;
- color: #666565;
- overflow: hidden;
- position: relative;
- }
- .Homeslide_hand0 {
- width: 37px;
- height: 53px;
- position: absolute;
- left: 0;
- top: 93px;
- background: url(http: //n.sinaimg.cn/game/homepage/home_slide.png) 0 -53px;
- cursor: pointer;
- }
- .Homeslide_hand0: hover {
- background - position: 0 0;
- }
- .Homeslide_hand1 {
- width: 37px;
- height: 53px;
- position: absolute;
- right: 0;
- top: 93px;
- background: url(http: //n.sinaimg.cn/game/homepage/home_slide.png) -37px -53px;
- cursor: pointer;
- }
- .Homeslide_hand1: hover {
- background - position: -37px 0;
- }
- .Homeslide_bigwrap {
- width: 490px;
- height: 318px;
- position: relative;
- }
- .Homeslide_bigpicdiv {
- width: 490px;
- height: 248px;
- }
- .Homeslide_bigpicdiv_mask {
- display: block;
- width: 100 % ;
- height: 40px;
- line - height: 40px;
- font - size: 16px;
- text - indent: 15px;
- position: absolute;
- left: 0;
- top: 209px;
- color: #fff;
- background: url(http: //n.sinaimg.cn/game/homepage/home_slide.png) 0 74px;
- }
- .Homeslide_bigpicdiv img {
- width: 100 % ;
- height: 248px;
- }
- .Homeslide_detail {
- height: 70px;
- border - left: 1px solid#d2d2d2;
- border - right: 1px solid#d2d2d2;
- line - height: 2em;
- }
- .Homeslide_detail p {
- width: 310px;
- padding: 10px 25px 0 15px;
- float: left;
- height: 52px;
- overflow: hidden;
- }
- .Homeslide_ralate {
- height: 36px;
- border - left: 1px solid#d2d2d2;
- line - height: 1;
- float: left;
- padding - left: 26px;
- margin - top: 16px;
- }
- .Homeslide_ralate a {
- color: #ff6600;
- }
- .Homeslide_thumb {
- height: 106px;
- border: 1px solid#d2d2d2;
- border - top: none;
- background: #f2f2f2;
- position: relative;
- }
- .Homeslide_angle {
- width: 13px;
- height: 7px;
- position: absolute;
- left: 55px;
- top: -7px;
- overflow: hidden;
- display: none;
- background: url(http: //n.sinaimg.cn/game/homepage/angle.gif) -1px -1px;
- }
- .Homeslide_thumb ul {
- position: absolute;
- left: 0;
- top: 0;
- width: 10000px;
- }
- .Homeslide_thumb li {
- width: 122px;
- height: 95px;
- float: left;
- text - align: center;
- line - height: 12px;
- cursor: pointer;
- position: relative;
- padding - top: 11px;
- color: #474747;
- }
- .Homeslide_thumb li.this {
- background: #d2d2d2;
- }
- .Homeslide_thumb li.this.Homeslide_angle {
- display: block;
- }
- .Homeslide_thumb li img {
- width: 100px;
- height: 59px;
- display: block;
- margin: 0 auto;
- margin - bottom: 13px;
- }
以上内容就是本文全部代码,需要的朋友可以参考下。
来源: http://www.phperz.com/article/17/0719/270240.html