jQuery焦点图左右转换效果


Posted in Javascript onDecember 12, 2016

本文实例为大家分享了jQuery焦点图左右转换的具体代码,供大家参考,具体内容如下

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>焦点图转换</title>
  <link rel="stylesheet" href="css/reset.css">
  <style type="text/css">
    .pic-show{width: 480px;overflow: hidden;}
    .pic{width: 1920px;height: 320px;position: relative;}
    .pic img{display: block;float: left;}
    .pic-show>img{display: block;cursor: pointer;opacity: 0.8; position: absolute;top: 142px;left: 30px;}
    .pic-show>img:last-child{display: block; position: absolute;left: 414px; } 
    ul{width: 120px;height: 18px;position: absolute;top: 280px;left: 185px;}
    li{float: left;width: 20px;height: 18px;margin-left: 5px;}
    a{display: block;width: 20px;height: 18px;text-decoration: none;border: 1px solid #ccc;border-radius: 50%;background-color: #ccc;opacity: 0.6;}
    a:hover{background-color: #094a99;}
    .aCss{background-color: #094a99;}
    p{width: 480px;text-align: center;}
    
  </style>
</head>
<body>
  <div class="pic-show">
    <div class="pic">
      <img src="images/1.jpg" alt="">
      <img src="images/2.jpg" alt="">
      <img src="images/3.jpg" alt="">
      <img src="images/4.jpg" alt="">
    </div>
    <img class="prev" src="images/slider-prev.png" alt="">
    <img class="next" src="images/slider-next.png" alt="">
  </div>
  <ul>
    <li><a class="aCss" href="#" title="日落"></a></li>
    <li><a href="#" title="钢琴"></a></li>
    <li><a href="#" title="大海"></a></li>
    <li><a href="#" title="秋色"></a></li>
  </ul>
  <p>这是一段测试文字</p>
  <script src="js/jquery-3.0.0.js"></script>
  <script type="text/javascript">
    var num=0;//定义num,以便点击左右按钮时得到0,1,2,3这四个值来找到图片


//点击next按钮
    $(".pic-show .next").click(function(event){
      if(num<3){
        num=num+1;  
      }
      else{
        num=0;
      }
      console.log(num);
      var mlNum=num * -480+'px';
      $(".pic").animate({"margin-left":mlNum},1000)
      $("ul li:eq("+num+") a").addClass("aCss").parent().siblings().find("a").removeClass("aCss");
      event.preventDefault();
      var txt=$("ul li").eq(num).find("a").attr("title");
      console.log(txt);
      $("p").text(txt);
    })



//点击prev按钮
    $(".pic-show .prev").click(function(event){
      if(num>0){
        num=num-1;  
      }
      else{
        num=3;
      }
      console.log(num);
      var mlNum2=num * -480+'px';
      $(".pic").animate({"margin-left":mlNum2},1000)
      $("ul li").eq(num).find("a").addClass("aCss").parent().siblings().find("a").removeClass("aCss");
      event.preventDefault();
      var txt=$("ul li").eq(num).find("a").attr("title");
      console.log(txt);
      $("p").text(txt);
    })
    $("ul li a").click(function(event){
      num=$(this).parent().index();
      var mlNum3=num * -480+'px';
      $(".pic").animate({"margin-left":mlNum3},500)
      
      $(this).addClass("aCss").parent().siblings().find("a").removeClass("aCss");//addClass 
      event.preventDefault();

      var txt=$(this).attr("title");
      console.log(txt);//测试用
      $("p").text(txt);
    })
  </script>

</body>
</html>

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

Javascript 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 #Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 #Javascript
多种方式实现js图片预览
Dec 12 #Javascript
JavaScript实现多栏目切换效果
Dec 12 #Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 #Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 #Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 #Javascript
You might like
php中文字符截取防乱码
2008/03/28 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
浅谈django 重载str 方法
2020/05/19 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
教师实习自我鉴定
2013/12/18 职场文书
便利店促销方案
2014/02/20 职场文书
学生鉴定评语大全
2014/05/05 职场文书
大学生求职自荐信
2015/03/24 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
MySQL8.0.18配置多主一从
2021/06/21 MySQL
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技