jQuery 美女画廊案例

源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body {background-color: #666;}#dv {margin: 0 200px;}#dv a img{/*float: left;*/width: 200px;height: 100px;}.image {width: 820px;height: 460px;margin: 0 200px;}p{margin: 0 200px;}</style><!--<script type="text/javascript">function my$(id){return document.getElementById(id);}window.onload=function () {var abq=my$("dv").getElementsByTagName("a");for (i=0;i<abq.length;i++){abq[i].onclick=function () {document.getElementsByClassName("image")[0].src=this.href;document.getElementsByTagName("p")[0].innerText=this.title;return false;}}}</script>--><!--<script type="text/javascript">window.onload=function(){var pho=document.getElementById('dv').getElementsByTagName('a');for(var i=0;i<pho.length;i++){pho[i].onclick=function(){document.getElementsByClassName("image")[0].src=this.href;document.getElementsByTagName("p")[0].innerText=this.title;return false;}}}</script>--><script src="js/jquery-3.3.1.js"></script><script>$(function(){$("a").click(function(){$(".image").attr("src",$(this).attr("href"));$("p").text($(this).attr("title"));return false;});});</script></head><body><div id="dv"><h1>美女画廊</h1><a href="imgs/1.jpg" title="美女1"><img src="imgs/1.1.jpg" alt="" title="美女A"></a><a href="imgs/2.jpg" title="美女2"><img src="imgs/2.2.jpg" alt="" title="美女B"></a><a href="imgs/3.jpg" title="美女3"><img src="imgs/3.3.jpg" alt="" title="美女C"></a><a href="imgs/4.jpg" title="美女4"><img src="imgs/4.4.jpg" alt="" title="美女D"></a></div><br><img src="imgs/1.1.1.jpg" alt="" class="image"><br><p>选择一个图片</p></body>
</html>

样图：

jQuery 美女画廊案例相关推荐

jQuery案例：美女画廊
下面是我用jQueryjQuery的属性的获取和设置写的一个小案例:美女画廊 html部分 <div id="dv"><h1>美女画廊</h1> ...
JQuery 入门 - 附案例代码
文章目录预备知识与后续知识及项目案例为什么要学jquery 体验jquery的使用 jquery到底是什么 jquery的版本问题 jquery的入口函数 jq对象和dom对象(重要) jquer ...
十个jQuery图片画廊插件推荐
2019独角兽企业重金招聘Python工程师标准>>> jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuer ...
jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
jQuery选择器经典案例
jQuery选择器经典案例具体讲解内容参照上一篇: 选择器详细讲解基本选择器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu ...
美女画廊（点击上面的图片下面进行显示）
效果图: <!DOCTYPE html><html><head><meta charset="UTF-8"><title> ...
JavaScript -- jQuery网页开发案例笔记
视频地址:黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili 视频代码地址:JavaScript_jQuery测试案例: 本仓库是学习jQuery相关知识.视频网址: ...
一款简单实用的jQuery图片画廊插件
图片画廊今天分享一个自己实现的jQuery 图片画廊插件. 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.h ...
通过原生js实现美女画廊
美女画廊 1.思路 : 2.静态页面代码展示 : 3.css样式: 4.js代码 1.思路 : 1.搭建静态页面2.获取元素3.遍历小图4.给每个小图绑定事件5.把小图的src属性赋值给大图的src6 ...

jQuery 美女画廊案例

jQuery 美女画廊案例相关推荐

最新文章

热门文章