快捷導(dǎo)航

jquery插件實現(xiàn)輪播圖效果

更新時間：2020年10月19日 10:18:46 作者：gyy520gyy

這篇文章主要為大家詳細(xì)介紹了jquery插件實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery插件實現(xiàn)輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

輪播圖的實現(xiàn)（jquery插件）
需要引入jquery插件，去jquery官網(wǎng)搜索

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 img {
 display: block;
 }

 .slider {
 height: 340px;
 width: 790px;
 margin: 100px auto;
 position: relative;
 overflow: hidden;
 }

 .slider li {
 position: absolute;
 display: none;
 }

 .slider li:first-child {
 display: block;
 }

 /*文字部分的樣式*/

 .slider li p {
 position: absolute;
 width: 100%;
 padding: 10px 0;
 text-indent: 2em;
 background-color: rgba(0, 0, 0, .6);
 bottom: 0;
 left: 0;
 font-size: 18px;

 /*給文字設(shè)置位移到底部去*/
 transform: translate3d(0, 100%, 0);
 /*添加過渡*/
 transition: all .8s;
 }

 /*當(dāng)前展示li 下的文字樣式*/

 .slider li.current p {
 /*文字位移到0的位置，正常顯示*/
 transform: translate3d(0, 0, 0);
 }

 .slider li a {
 color: #fff;
 }

 .arrow {
 display: none;
 }

 .slider:hover .arrow {
 display: block;
 }

 .arrow-left,
 .arrow-right {
 font-family: "SimSun", "宋體";
 width: 30px;
 height: 60px;
 background-color: rgba(0, 0, 0, 0.1);
 position: absolute;
 top: 50%;
 margin-top: -30px;
 cursor: pointer;
 text-align: center;
 line-height: 60px;
 color: #fff;
 font-weight: 700;
 font-size: 30px;
 }

 .arrow-left:hover,
 .arrow-right:hover {
 background-color: rgba(0, 0, 0, .5);
 }

 .arrow-left {
 left: 0;
 }

 .arrow-right {
 right: 0;
 }
 </style>
</head>
<body>
 <div class="slider">
 <ul>
 <li>
 <a href="#" >
  <img src="image/1.jpg" alt="">
  <p>這是第1張圖片的文字說明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/2.jpg" alt="">
  <p>這是第2張圖片的文字說明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/3.jpg" alt="">
  <p>這是第3張圖片的文字說明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/4.jpg" alt="">
  <p>這是第4張圖片的文字說明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/5.jpg" alt="">
  <p>這是第5張圖片的文字說明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/6.jpg" alt="">
  <p>這是第6張圖片的文字說明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/7.jpg" alt="">
  <p>這是第7張圖片的文字說明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/8.jpg" alt="">
  <p>這是第8張圖片的文字說明</p>
 </a>
 </li>
 </ul>
 <!--箭頭-->
 <div class="arrow">
 <span class="arrow-left">&lt;</span>
 <span class="arrow-right">&gt;</span>
 </div>
 </div>
 <script src="../jquery-2.2.4.js"></script> //jquery插件
 <script>
 //1、定義一個索引，且設(shè)置第一張圖片為默認(rèn)
 var index = 0;
 $('ul>li').eq(index).addClass('current').siblings().removeClass('current');
 //2、右邊按鈕的點擊
 $('.arrow-right').click(function(){
 index++;
 //判斷圖片是否超過最后一張，則重新賦值
 if(index == $('ul>li').length){
 index = 0;
 }
 showImage();
 })
 左邊按鈕的實現(xiàn)
 $('.arrow-left').click(function(){
 index--;
 if(index < 0) index = $('ul>li').length - 1;
 showImage()
 });
 function showImage(){
 $('ul>li').eq(index).addClass('current').fadeIn().siblings().removeClass('current').fadeOut();
 }

 //實現(xiàn)自動輪播
 var times = '';
 //鼠標(biāo)移入停止播放
 $('.slider').mouseover(function(){
 clearInterval(times)
 })
 //鼠標(biāo)移出，停止
 $('.slider').mouseout(function(){
 times = setInterval(function(){
 $('.arrow-right').click();
 },3000)
 });
 $('.slider').mouseout();

 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: