jQuery焦点图左右转换效果

本文实例为大家分享了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>

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

赞 (0)

相关推荐

  • 基于jquery实现轮播焦点图插件

    直接上代码,可能不是最好的,欢迎吐槽. /** * Created by Steven on 2015/07/10/0010. * @email zhuttymore@126.com */ (function ($) { $.fn.slider = function (opt) { opt = $.extend({ speed:'fast', auto: false, interval: 1000 }, opt); var _this = this; var index = 0; _this.f

  • jQuery实现的自适应焦点图效果完整实例

    jQuery实现的自适应焦点图效果完整实例

    本文实例讲述了jQuery实现的自适应焦点图效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,

  • jQuery焦点图轮播效果实现方法

    本文实例讲述了jQuery焦点图轮播效果实现方法.分享给大家供大家参考,具体如下: 前面一篇<JS实现焦点图轮播效果的方法详解>详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧. 核心代码如下: $(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(

  • jQuery右侧选项卡焦点图片轮播特效代码分享

    jQuery右侧选项卡焦点图片轮播特效代码分享

    本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.  为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-

  • 基于JQuery实现图片轮播效果(焦点图)

    基于JQuery实现图片轮播效果(焦点图)

    自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize. 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改. 效果图如下: Html代码如下: <html> <head> <meta charset="utf-8"> <title&

  • jQuery插件实现带圆点的焦点图片轮播切换

    这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <base target="_blank" /> <

  • jquery实现自适应banner焦点图

    jquery实现自适应banner焦点图

    效果如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css

  • 基于Jquery实现焦点图淡出淡入效果

    基于Jquery实现焦点图淡出淡入效果

    本文实例讲述了基于Jquery实现焦点图淡出淡入效果代码.分享给大家供大家参考.具体如下: 这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换间隔两个参数可以改. 运行效果截图如下: 具体代码如下: Html代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8">

  • jQuery插件bxSlider实现响应式焦点图

    jQuery插件bxSlider实现响应式焦点图

    优秀响应式jQuery焦点图插件bxSlider,优秀响应式布局设计jQuery插件,自适 应任何设备,切换内容可以是视频.图片.HTML.支持触摸设备,自定义函数 callback,支持众多的参数自定义配置,浏览器支持Firefox, Chrome, Safari, iOS, Android, IE7+. 使用方法: 1. 加载jQuery和插件 <!-- jQuery library (served from Google) --> <script src="jquery/

随机推荐