简单实现jquery焦点图

本文实例为大家分享了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焦点图特效汇总》进行学习，希望大家喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅析Jquery操作select

    话不多说,请看代码: <select id="Select1"> <option value="one">一</option> <option value="two">二</option> <option value="thr">三</option> <option value="tho">四</optio

  • 基于jquery实现的鼠标悬停提示案例

    基于jquery实现的鼠标悬停提示案例

    //这是JS里的代码MOMO.js 因为刚学封装JQUERY插件 所以就做的稍微麻烦一点,其实在前台页面直接就可以用mouseover,mouseout,mousemove三个事件就行了 (function ($) { $.fn.extend({ "titleOver": function (e) { this[0].myTitle = this[0].title; this[0].title = ""; //创建div元素 var tooltip = "

  • 基于jQuery实现的查看全文功能【实用】

    话不多说,请看具体实例 自己引用jQuery.js版本 查看全文---收起(文本内容少于四行,不显示查看全文---收起,超过五行时才显示出来并有此功能) <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery1.7.2.min.js"></s

  • jquery滚动条插件（可以自定义）

    以后用起来就方便了把 css文件引入 <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"> js引入 <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script&

  • jQuery中值得注意的trigger方法浅析

    jQuery中值得注意的trigger方法浅析

    介绍 trigger方法的功能是在所选择的元素上触发指定类型的事件,其调用的语法格式为:trigger(type,[data]) ,其中参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附件参数. 常用模拟 有时,不需要进行操作,也想模拟用户操作达到某些效果.比如在用户进入界面后就触发click事件,而不需要用户去点击. 在jquery中可以使用trigger完成. $("#btn").trigger("click")//触发id为b

  • jQuery实现字符串全部替换的方法

    本文实例讲述了jQuery实现字符串全部替换的方法.分享给大家供大家参考,具体如下: 与C# String类型的Replace方法不同,jQuery的Replace仅能替换第一个匹配的内容. 例如: var str = "a<br/>b<br/>c<br/>"; var Newstr = str.Replace("<br/>", ""); alert(Newstr); //内容为:ab<br/

  • jQuery 获取select选中值及清除选中状态

    不会使用jQuery的后台真心伤不起,获取select下拉列表的值都让我搞了好一阵,然而并没有结束,恢复选中状态也是花了我半个小时. 这里先记一下省的以后会忘了. 获取jQuery中select下拉列表中的lang属性值: <span style="font-size:14px;"> var provinceSearch = $("#loc_province_search").find("option:selected").attr(

  • jQuery实现金额录入框

    前端开发过程中,通常会用到数值录入框,比如要求输入金额,禁止录入非数值字符,也禁止粘贴非数值字符,怎么实现呢? 首先通过(function($){  })(jQuery); 即时执行函数用于模块隔离,可以避免与其他功能模块.插件之间产生变量污染问题,所有私有的全局变量可以放在即时执行函数的头部. 然后在jquery原型上扩展numbox方法,直接上代码 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type = (

  • jQuery学习笔记之入门

    最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看

  • jQuery内存泄露解决办法

    本文大家分享了jQuery内存泄露解决办法,供大家参考,具体内容如下 思路:为JQuery扩展删除jquery元素对象的方法,大大减轻内存泄露的压力 ;(function($){ if(!$.lui.widget) $.lui.widget = {}; //$.lui.newGuid()生成随机32位id //如果采用此方式多次生成jquery对象的话,html代码字符串会在内存中多次重复,占用额外的内容,也会有泄露.而$("<span></span>").at

  • jQuery中animate的几种用法与注意事项

    jQuery中animate的几种用法与注意事项

    一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

  • jquery实现简单的瀑布流布局

    jquery实现简单的瀑布流布局

    是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流从布局的角度来说,就是4个li标签.通过一定的事件(比如滚动条滚动多少px),然后读取之,再把数据动态地添加到页面中. 添加数据原则,不是根据li索引值来加,而是根据各列中高度最短的的那列动态添加.否则可能导致页面很难看(左右高度不统一). 实例涉及ajax方法.可在服务器环境下运行. 废话不多说了.直接上样式. <ul id=&qu

随机推荐