这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这个是一个简单的点击箭头图片切换的例子。JS 部分采用过的是 jQuery
步骤如下:
(1) 准备图片 (左右箭头, 以及一些示例图片)
(2) JS(jquery) 的代码如下:
- <script type="text/javascript" src="JS/jquery-1.4.4.js">
- </script>
- <script type="text/javascript">
- var picPath = new Array();
- picPath.push("Images/chuang_yhb.jpg");
- picPath.push("Images/dong_wgx.jpg");
- picPath.push("Images/gao_xsg.jpg");
- var index = 0;
- $(function() {
- var top = $("#img1").offset().top;
- var left = $("#img1").offset().left;
- var height = $("#img1").height();
- var width = $("#img1").width();
- $("#img1").attr({
- "src": picPath[index]
- });
- $("#img1").parent().hover(function() {
- //show the arrow left and right
- $("#leftArrow").show();
- $("#rightArrow").show();
- $("#leftArrow").CSS({
- "left": left - 10,
- "top": top + (height / 2)
- });
- $("#rightArrow").css({
- "left": left + width,
- "top": top + (height / 2)
- });
- },
- function() {
- //hide the arrrow left and right
- $("#leftArrow").hide();
- $("#rightArrow").hide();
- });
- $("#leftArrow").click(function() {
- if (index > 0) {
- $("#img1").attr({
- "src": picPath[--index]
- });
- }
- });
- $("#rightArrow").click(function() {
- if (index < picPath.length) {
- $("#img1").attr({
- "src": picPath[++index]
- });
- }
- });
- });
- </script>
(3) html 部分如下:
下面再附一个 js 版的
- <div>
- <img id="img1" alt="Show Pictures" style="margin-left:100px;" />
- <img id="leftArrow" alt="Left Arrow" src="Images/arrowa.jpg" style="position:absolute;display:none;width:50px;height:35px;z-index:99"
- />
- <img id="rightArrow" alt="Right Arrow" src="Images/arrowb.jpg" style="position:absolute;display:none;width:50px;height:35px;z-index:99"
- />
- </div>
- <!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=gb2312" />
- <title>
- 无标题文档
- </title>
- <style type="text/css">
- <!-- *{ margin:0; padding:0} #imgslide{ margin:100px auto; width:550px;
- position:relative;-moz-user-select:none } #imgslide img{ width:550px} #imgslide
- #pre{ position:absolute; display:block; height:100%; background:#003366;filter:Alpha(Opacity=0);opacity:0;
- left:0; top:0; z-index:2; width:50%; cursor:url(http://s.xnimg.cn/imgpro/arrow/pre.cur),auto;
- } #imgslide #next{ position:absolute;z-index:2; display:block; background:#00CC99;filter:Alpha(Opacity=0);opacity:0;
- height:100%;width:50%; top:0; right:0; cursor:url(http://s.xnimg.cn/imgpro/arrow/next.cur),
- auto;} #intro{ padding:5px 8px; line-height:1.6; font-size:12px; color:#333;
- background:#333333; color:#fff} -->
- </style>
- </head>
- <body>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_16/1490185672_9422.jpg"
- data-src="" />
- <div>
- </div>
- </div>
- <script type="text/javascript">
- $ = function(obj) {
- return document.getElementById(obj);
- }
- //图片地址
- var imgsrc = new Array();
- imgsrc[0] = "http://img1.gtimg.com/0/68/6884/688412_550x550_0.jpg";
- imgsrc[1] = "http://img1.gtimg.com/0/68/6899/689943_550x550_0.jpg";
- imgsrc[2] = "http://img1.gtimg.com/0/68/6899/689941_550x550_0.jpg";
- imgsrc[3] = "http://img1.gtimg.com/0/68/6884/688414_550x550_0.jpg";
- imgsrc[4] = "http://img02.taobaocdn.com/tps/i2/T1z5BEXjJvXXXXXXXX-638-369.jpg";
- imgsrc[5] = "http://img05.taobaocdn.com/tps/i5/T1Vx4EXeleXXXXXXXX-638-369.jpg";
- imgsrc[6] = "http://img02.taobaocdn.com/tps/i2/T12zVEXk4bXXXXXXXX-638-369.jpg";
- imgsrc[7] = "http://img07.taobaocdn.com/tps/i7/T15wlEXmlEXXXXXXXX-638-369.jpg";
- imgsrc[8] = "http://img01.taobaocdn.com/tps/i1/T1tjxEXclXXXXXXXXX-638-369.jpg";
- //图片预加载
- var arr = new Array();
- for (var i = 1; i <= imgsrc.length; i++) {
- arr[i] = new Image();
- arr[i].src = imgsrc[i];
- arr[i].onload;
- }
- //图片文字简介
- var title = new Array();
- title[0] = "1双胞胎足球宝贝雨蔷、雨薇上演超级模仿秀,再现本届世界杯上的一些经典片段。";
- title[1] = "2高清:荷兰美女长发飘散 热情冷艳";
- title[2] = "3图片文字介绍3";
- title[3] = "4图片文字介绍444444444";
- title[4] = "4图片文字介绍55555555555";
- title[5] = "4图片文字介绍666666666666";
- title[6] = "4图片文字介绍77777777777777";
- title[7] = "4图片文字介绍88888888888";
- title[8] = "4图片文字介绍999999999999";
- $("intro").innerHTML = title[0]
- i = 0;
- $("next").onclick = function() {
- i++;
- if (i >= imgsrc.length) {
- i = 0
- }
- $("showimg").setAttribute("src", imgsrc[i]);
- $("intro").innerHTML = title[i]
- }
- $("pre").onclick = function() {
- i--;
- if (i < 0) {
- i = imgsrc.length - 1
- }
- $("showimg").setAttribute("src", imgsrc[i]);
- $("intro").innerHTML = title[i]
- }
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0708/281468.html