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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
Webpack3+React16代码分割的实现
Mar 03 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魔术方法__GET、__SET使用实例
2014/11/25 PHP
中文字符串截取的js函数代码
2013/04/17 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
JavaScript函数详解
2014/11/17 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
python 控制语句
2011/11/03 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
python实现定时发送邮件
2020/12/23 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
上课迟到检讨书
2014/02/19 职场文书
社区综治工作汇报
2014/10/27 职场文书
武夷山导游词
2015/02/03 职场文书
投标单位介绍信
2015/05/05 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
新手必备Python开发环境搭建教程
2021/05/28 Python