简单实现jquery焦点图


Posted in Javascript onDecember 12, 2016

本文实例为大家分享了jquery焦点图的实现代码,供大家参考,具体内容如下

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>焦点图</title>
 <style type="text/css">
 img{position: relative;}
 ul{list-style: none;width: 545px;position: absolute;top: 280px;left: 170px;}
 li{float: left;width: 20px;line-height: 18px;border: 1px solid #ccc;background-color:#494a93;}
 a:hover{background-color: red;}
 a{display: block;width: 20px;line-height: 18px;color: white;text-decoration: none;text-align: center;font-size: 12px;font-family: arial;}
 p{width: 480px;text-align: center;}
 </style>
</head>
<body>
 <img src="images/1.jpg" alt="">
 <ul>
 <li><a href="images/1.jpg" title="日落">1</a></li>
 <li><a href="images/2.jpg" title="钢琴">2</a></li>
 <li><a href="images/3.jpg" title="大海">3</a></li>
 <li><a href="images/4.jpg" title="秋色">4</a></li>
 </ul>
 <p>这是一段测试文字</p>
 <script src="js/jquery-3.0.0.js"></script>
 <script type="text/javascript">


//方法一:超级简单易懂的方法
 /*$("ul li:nth-child(1) a").click(function(event){
  $("img").attr("src","images/1.jpg") 

  var imgsrc=$(this).attr("href")
  $("img").attr("src",imgsrc)

  $("img").attr("src",$(this).attr("href"))

  $("ul li:nth-child(1)").css("background-color","red")
  $("ul li:nth-child(2)").css("background-color","#494a93")
  $("ul li:nth-child(3)").css("background-color","#494a93")
  $("ul li:nth-child(4)").css("background-color","#494a93")
  event.preventDefault();
 })
 $("ul li:nth-child(2) a").click(function(event){
  $("img").attr("src","images/2.jpg")

  var imgsrc=$(this).attr("href")
  $("img").attr("src",imgsrc)

  $("ul li:nth-child(2)").css("background-color","red")
  $("ul li:nth-child(1)").css("background-color","#494a93")
  $("ul li:nth-child(3)").css("background-color","#494a93")
  $("ul li:nth-child(4)").css("background-color","#494a93")
  event.preventDefault();
 })
 $("ul li:nth-child(3) a").click(function(event){
  $("img").attr("src","images/3.jpg")

  var imgsrc=$(this).attr("href")
  $("img").attr("src",imgsrc)

  $("ul li:nth-child(3)").css("background-color","red")
  $("ul li:nth-child(2)").css("background-color","#494a93")
  $("ul li:nth-child(1)").css("background-color","#494a93")
  $("ul li:nth-child(4)").css("background-color","#494a93")
  event.preventDefault();
 })
 $("ul li:nth-child(4) a").click(function(event){
  $("img").attr("src","images/4.jpg")

  var imgsrc=$(this).attr("href")
  $("img").attr("src",imgsrc)

  $("ul li:nth-child(4)").css("background-color","red")
  $("ul li:nth-child(2)").css("background-color","#494a93")
  $("ul li:nth-child(3)").css("background-color","#494a93")
  $("ul li:nth-child(1)").css("background-color","#494a93")
  event.preventDefault();
 })*/







//方法二:简化了方法一重复的代码量 ,利用.parent().siblings().find("a")选择到父级的其他兄弟元素
 $("ul li a").click(function(event){
  /*$("img").attr("src","images/4.jpg")*/

  var imgsrc=$(this).attr("href");
  $("img").attr("src",imgsrc);
  
  $(this).css({"background-color":"red","color":"yellow"});
  $(this).parent().siblings().find("a").css({"background-color":"#494a93","color":"white"});
  event.preventDefault();

  var txt=$(this).attr("title");
  console.log(txt); //在控制台输出
  $("p").text(txt);
 })
 /*$("ul li a").hover(function(event){ 
  $(this).css("background-color","red");
 },function(){
  $(this).css("background-color","#494a93")
 })*/
 </script>
</body>
</html>

以上是一个简单地焦点图事例,思路:图片路径写在a标签的href属性里,点击a得到$(this).attr("href");并把这个值给img的src。用简单地jQuery写一个点击事件。

更多精彩内容大家还可以参考《jQuery焦点图特效汇总》进行学习,希望大家喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
微信小程序实现简单表格
Feb 14 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
javascript中setAttribute兼容性用法分析
Dec 12 #Javascript
jQuery焦点图左右转换效果
Dec 12 #Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 #Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 #Javascript
多种方式实现js图片预览
Dec 12 #Javascript
JavaScript实现多栏目切换效果
Dec 12 #Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 #Javascript
You might like
初品cakephp 入门基础
2012/02/16 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Django的信号机制详解
2017/05/05 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python实现批量文件重命名
2019/10/31 Python
python matplotlib拟合直线的实现
2019/11/19 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
旅游管理本科生求职信
2013/10/14 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
护士演讲稿范文
2014/01/05 职场文书
爱情检讨书大全
2014/01/21 职场文书
自我鉴定书
2014/03/24 职场文书
人力资源管理求职信
2014/08/07 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2016年春节慰问信息
2015/03/25 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL