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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
javascript常用的方法整理
Aug 20 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
关于React Native 无法链接模拟器的问题
Jun 21 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 中的一些经验积累
2006/10/09 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php中apc缓存使用示例
2013/12/25 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python实现学生管理系统
2018/01/11 Python
python 显示数组全部元素的方法
2018/04/19 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
static关键字的用法
2013/10/07 面试题
新闻专业个人自我评价
2013/09/21 职场文书
业务代表的岗位职责
2013/11/16 职场文书
绩效考核实施方案
2014/03/18 职场文书
公民授权委托书范本
2014/09/17 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript