欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動(dòng)切換-點(diǎn)擊左右按鈕切換特效代碼

 更新時(shí)間：2015年09月02日 11:28:03   投稿：mrr  
今天主要給大家分享一段js和css代碼組合實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊按鈕圖片切換，圖片自動(dòng)切換，點(diǎn)擊左右按鈕圖片切換三種效果，代碼非常簡單，需要的朋友一起來學(xué)習(xí)吧

今天來分享一下鼠標(biāo)點(diǎn)擊按鈕，圖片進(jìn)行切換+圖片自動(dòng)切換+點(diǎn)擊左右按鈕圖片進(jìn)行切換的三種效果的組合代碼。

最后的效果如下：

 

 

Html代碼部分：

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>圖片輪播效果制作_趙一鳴隨筆博客</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/style.js"></script>
 </head>
 <body>
   <div class="banner">
     <ul class="pic">
       <li>
          <a href="#"><img src="images/1.jpg" alt="美女" width="350" height="495"></a>
       </li>
       <li>
          <a href="#"><img src="images/2.jpg" alt="美女" width="350" height="495"></a>
       </li>
       <li>
          <a href="#"><img src="images/3.jpg" alt="美女" width="350" height="495"></a>
       </li>
       <li>
          <a href="#"><img src="images/4.jpg" alt="美女" width="350" height="495"></a>
       </li>
       <li>
          <a href="#"><img src="images/5.jpg" alt="美女" width="350" height="495"></a>
       </li>
     </ul>
     <ul class="anniu">
       <li class="on"></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
     </ul>
     <ul class="lr">
       <li class="pre"><a href="#"> < </a></li>
       <li class="next"><a href="#"> > </a></li>
     </ul>
   </div>
 </body>
</html>

Css代碼部分：

*{margin:0px;padding:0px}
li{list-style:none}
a{text-decoration:none}
img{border:0px}
.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}
.banner .pic{width:9999px;height:495px}
.banner .pic li{width:350px;height:495px;float:left}
.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}
.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline;
cursor:pointer;border-radius:100%}
.banner .anniu li.on{background:red}
.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}
.banner .lr a{color:white}
.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}
.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}

Javascript代碼部分：

$(function(){
   //鼠標(biāo)滑過banner，左右按鈕進(jìn)行顯示和隱藏
   $(".banner").hover(function(){
     $(".lr").show();
   },function(){
     $(".lr").hide();
   });
   //點(diǎn)擊下面的小按鈕，圖片進(jìn)行左右切換效果
   $(".anniu li").click(function(){
     $(this).addClass("on").siblings().removeClass("on");
     var num=$(this).index();
     $(".pic").animate({marginLeft:-350*num},"slow");
   });
   //圖片自動(dòng)輪播效果
   var a=0;
   var automatic=setInterval(function(){
     a++;
     a=a%5;
     $(".pic").animate({marginLeft:-350*a},"slow");
     $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
   },6000);
   //點(diǎn)擊左右按鈕，圖片進(jìn)行切換效果
   $(".pre").click(function(){
     a--;
     a=(a+5)%5;
     $(".pic").animate({marginLeft:-350*a},"slow");
     $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
   });
   $(".next").click(function(){
     a++;
     a=a%5;
     $(".pic").animate({marginLeft:-350*a},"slow");
     $(".anniu li").eq(a).addClass("on").siblings().removeClass("on");
   });
});

相關(guān)文章

  • 簡單談?wù)刯avascript中的變量、作用域和內(nèi)存問題

    簡單談?wù)刯avascript中的變量、作用域和內(nèi)存問題

    這篇文章主要介紹了簡單談?wù)刯avascript中的變量、作用域和內(nèi)存問題的相關(guān)資料,需要的朋友可以參考下
    2015-08-08
  • 微信小程序日期時(shí)間選擇器使用方法

    微信小程序日期時(shí)間選擇器使用方法

    這篇文章主要為大家詳細(xì)介紹了微信小程序日期時(shí)間選擇器的使用方法，自定義精確到分秒或時(shí)段，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-02-02
  • JS獲取scrollHeight問題想到的標(biāo)準(zhǔn)問題

    JS獲取scrollHeight問題想到的標(biāo)準(zhǔn)問題

    如果沒有文檔聲明可以用 document.body.scrollHeight,如果有文檔聲明必須用 document.documentElement.scrollHeight關(guān)于這方面的東西
    2007-05-05
  • 分享自己用JS做的掃雷小游戲

    分享自己用JS做的掃雷小游戲

    引用了jQuery，節(jié)省了很多鼠標(biāo)點(diǎn)擊上的判斷。界面顯然都是照搬Windows的掃雷啦，詳細(xì)的內(nèi)容注釋里都有，感興趣的朋友參考下吧
    2016-02-02
  • jsPDF導(dǎo)出pdf示例

    jsPDF導(dǎo)出pdf示例

    這篇文章主要介紹了jsPDF如何導(dǎo)出pdf，不過其貌似不支持中文,需要的朋友可以參考下
    2014-05-05
  • JS回調(diào)函數(shù)簡單易懂的入門實(shí)例分析

    JS回調(diào)函數(shù)簡單易懂的入門實(shí)例分析

    這篇文章主要介紹了JS回調(diào)函數(shù),結(jié)合簡單實(shí)例形式分析了javascript回調(diào)函數(shù)的概念、原理、相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下
    2019-09-09
  • JavaScript數(shù)組reduce()方法使用實(shí)例詳解

    JavaScript數(shù)組reduce()方法使用實(shí)例詳解

    reduce是數(shù)組原型對(duì)象上的一個(gè)方法，可以幫助我們操作數(shù)組。本文將和大家分享4個(gè)關(guān)于JavaScript中數(shù)組reduce的用法，希望對(duì)大家有所幫助
    2022-07-07
  • 通過JavaScript實(shí)現(xiàn)圖片壓縮

    通過JavaScript實(shí)現(xiàn)圖片壓縮

    在學(xué)習(xí)的時(shí)候，有時(shí)候看到一些一些網(wǎng)站的圖片是經(jīng)過壓縮處理的，因?yàn)閴嚎s之后的圖片會(huì)節(jié)省一部分你的內(nèi)存空間，這樣的話也可以提升性能，于是就比較好奇這是如何實(shí)現(xiàn)的，今天我們就簡單的實(shí)現(xiàn)一下,需要的朋友可以參考下
    2023-06-06
  • 基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫

    基于Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫

    這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實(shí)現(xiàn)衛(wèi)星在軌繞行動(dòng)畫，文中的示例代碼講解詳細(xì)，對(duì)我們了解Cesium有一定的幫助，感興趣的可以嘗試一下
    2022-06-06
  • JS雙擊變input框批量修改內(nèi)容

    JS雙擊變input框批量修改內(nèi)容

    這篇文章主要介紹了JS雙擊變input框批量修改內(nèi)容的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-12-12

最新評(píng)論