简单实现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 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
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
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
javascript实现拖放效果
2015/12/16 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
Python的另外几种语言实现
2015/01/29 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
python检查指定文件是否存在的方法
2015/07/06 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python发展简史 Python来历
2019/05/14 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
金融专业推荐信
2013/11/14 职场文书
初一英语教学反思
2014/01/11 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
教师求职自荐信
2014/03/09 职场文书
优秀党员事迹材料
2014/12/18 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
68句权威创业名言
2019/08/26 职场文书