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高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
详解JavaScript中return的用法
May 08 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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
建立文件交换功能的脚本(一)
2006/10/09 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
php网站地图生成类示例
2014/01/13 PHP
降低PHP Redis内存占用
2017/03/23 PHP
图片按比例缩放函数
2006/06/26 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python中的推导式使用详解
2015/06/03 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
详解python中@的用法
2019/03/27 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
婚庆司仪主持词
2014/03/15 职场文书
高三毕业寄语
2014/04/10 职场文书
环保标语口号
2014/06/13 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
创业计划书之废品回收
2019/09/26 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA