jQuery焦点图左右转换效果

2019-11-19 18:33:05

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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中setAttribute兼容性用法分析

下一篇：js实现刷新页面后回到记录时滚动条的位置【两种方案可选】