jquery輪播圖插件使用方法詳解
更新時(shí)間：2020年07月31日 10:56:19 作者：taff
這篇文章主要為大家詳細(xì)介紹了jquery輪播圖插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery輪播圖插件使用案例，供大家參考，具體內(nèi)容如下
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="carousel.js"></script>
<script type="text/javascript">
$(function(){
$(".carousel-content").carousel({
carousel : ".carousel",//輪播圖容器
indexContainer : ".img-index",//下標(biāo)容器
prev : ".carousel-prev",//左按鈕
next : ".carousel-next",//右按鈕
timing : 2000,//自動(dòng)播放間隔
animateTime : 700,//動(dòng)畫時(shí)間
autoPlay : true,//是否自動(dòng)播放 true/false
direction : "left",//滾動(dòng)方向 right/left
});
$(".carousel-content").hover(function(){
$(".carousel-prev,.carousel-next").fadeIn(300);
},function(){
$(".carousel-prev,.carousel-next").fadeOut(300);
});
$(".carousel-prev").hover(function(){
$(this).find("img").attr("src","img/left2.png");
},function(){
$(this).find("img").attr("src","img/left1.png");
});
$(".carousel-next").hover(function(){
$(this).find("img").attr("src","img/right2.png");
},function(){
$(this).find("img").attr("src","img/right1.png");
});
});
</script>
</head>
<body>
<div class="content">
<div class="a-content">
<div class="carousel-content">
<ul class="carousel">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
<ul class="img-index"></ul>
<div class="carousel-prev"><img src="img/left1.png"></div>
<div class="carousel-next"><img src="img/right1.png"></div>
</div>
</div>
</div>
</body>
</html>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JQuery中使用on方法綁定hover事件實(shí)例,本文用于一些特殊環(huán)境下,需要的朋友可以參考下2014-12-12
這篇文章通過(guò)實(shí)例代碼給大家講解了jquery替換節(jié)點(diǎn)元素的操作方法及動(dòng)態(tài)頁(yè)面的實(shí)現(xiàn)代碼，非常不錯(cuò)，需要的朋友參考下吧2018-03-03
jQuery實(shí)現(xiàn)的簡(jiǎn)單前端搜索功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單前端搜索功能,涉及jQuery事件響應(yīng)與頁(yè)面元素遍歷、匹配、動(dòng)態(tài)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
jQuery 是最流行和使用最廣泛的 JavaScript 框架，它簡(jiǎn)化了HTML文檔遍歷，事件處理，動(dòng)畫以及Ajax交互，幫助Web開發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果2012-03-03
Easyui 去除jquery-easui tab頁(yè)div自帶滾動(dòng)條的方法
這篇文章主要介紹了Easyui 去除jquery-easui tab頁(yè)div自帶滾動(dòng)條的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了jQuery中nextUntil()方法用法,實(shí)例分析了nextUntil()方法的功能、定義及匹配同輩元素的技巧與注意事項(xiàng),需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
jQuery實(shí)現(xiàn)方法的鏈?zhǔn)讲僮魇欠浅Ｈ菀椎?。這里給出正確的使用方法2014-01-01
jQuery實(shí)現(xiàn)公告文字左右滾動(dòng)的實(shí)例代碼
這篇文章介紹了jQuery實(shí)現(xiàn)公告文字左右滾動(dòng)的實(shí)例代碼，有需要的朋友可以參考一下2013-10-10
這篇文章主要介紹了jQuery表格排序組件-tablesorter的使用,需要的朋友可以參考下2014-05-05