近期关于jquery轮播思路的讨论热度持续攀升 ，我们通过多方渠道收集整理了相关资讯 ，并进行了系统化的梳理。若这些内容恰好能为您提供参考，将是我们最大的荣幸 。
使用jQuery做轮播图是网页特效中很常见的一个特效 。
工具原料：编辑器、浏览器 、jQuery
1 、实现的总体思路：
首先是初始化部分：将除了第一张轮播意外的都隐藏，并且隐藏向前、向后按钮 ，使第一个索引按钮处于激活状态。
2、实现的具体事件处理思路：
事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理 ， jquery的bind()方法绑定鼠标点击事件处理向前 、向后翻动 、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
3、简单的代码示例如下：
<!DOCTYPE?html>?<html>?
<head>?
<meta?charset="UTF-8">?
<title>jquery轮播效果图?</title>?
<script?type="text/javascript"?src="scripts/jquery-1.9.1.js"></script>?
<style?type="text/css">?
*?{? padding:?0px;? margin:?0px;? }? a?{? text-decoration:?none;? }? ul?{? list-style:?outside?none?none;? }? .slider,?.slider-panel?img,?.slider-extra?{? width:?650px;? height:?413px;? }? .slider?{? text-align:?center;? margin:?30px?auto;? position:?relative;? }? .slider-panel,?.slider-nav,?.slider-pre,?.slider-next?{? position:?absolute;? z-index:?8;? }? .slider-panel?{? position:?absolute;? }? .slider-panel?img?{? border:?none;? }? .slider-extra?{? position:?relative;? }? .slider-nav?{? margin-left:?-51px;? position:?absolute;? left:?50%;? bottom:?4px;? }? .slider-nav?li?{? background:?#3e3e3e;? border-radius:?50%;? color:?#fff;? cursor:?pointer;? margin:?0?2px;? overflow:?hidden;? text-align:?center;? display:?inline-block;? height:?18px;? line-height:?18px;? width:?18px;? }? .slider-nav?.slider-item-selected?{? background:?blue;? }? .slider-page?a{? background:?rgba(0,?0,?0,?0.2);? filter:?progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);? color:?#fff;? text-align:?center;? display:?block;? font-family:?"simsun";? font-size:?22px;? width:?28px;? height:?62px;? line-height:?62px;? margin-top:?-31px;? position:?absolute;? top:?50%;? }? .slider-page?a:HOVER?{? background:?rgba(0,?0,?0,?0.4);? filter:?progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);? }? .slider-next?{? left:?100%;? margin-left:?-28px;? }?</style>?
<script?type="text/javascript">?
$(document).ready(function()?{? var?length,?currentIndex?=?0,?
interval,?
hasStarted?=?false,?//是否已经开始轮播?
t?=?3000;?//轮播时间间隔?
length?=?$('.slider-panel').length;? //将除了第一张隐藏? $('.slider-panel:not(:first)').hide();? //将第一个slider-item设为激活状态? $('.slider-item:first').addClass('slider-item-selected');? //隐藏向前 、向后翻按钮? $('.slider-page').hide();? //鼠标上悬时显示向前 、向后翻按钮,停止滑动 ，鼠标离开时隐藏向前、向后翻按钮 ，开始滑动? $('.slider-panel,?.slider-pre,?.slider-next').hover(function()?{?stop();?
$('.slider-page').show();?
},?function()?{?$('.slider-page').hide();?
start();?
});? $('.slider-item').hover(function(e)?{?stop();?
var?preIndex?=?$(".slider-item").filter(".slider-item-selected").index();?
currentIndex?=?$(this).index();?
play(preIndex,?currentIndex);?
},?function()?{?start();?
});? $('.slider-pre').unbind('click');? $('.slider-pre').bind('click',?function()?{?pre();?
});? $('.slider-next').unbind('click');? $('.slider-next').bind('click',?function()?{?next();?
});? /**?*?向前翻页?
*/
function?pre()?{?var?preIndex?=?currentIndex;?
currentIndex?=?(--currentIndex?+?length)?%?length;?
play(preIndex,?currentIndex);?
}? /**?*?向后翻页?
*/
function?next()?{?var?preIndex?=?currentIndex;?
currentIndex?=?++currentIndex?%?length;?
play(preIndex,?currentIndex);?
}? /**?*?从preIndex页翻到currentIndex页?
*?preIndex?整数，翻页的起始页?
*?currentIndex?整数 ，翻到的那页?
*/
function?play(preIndex,?currentIndex)?{?$('.slider-panel').eq(preIndex).fadeOut(500)?
.parent().children().eq(currentIndex).fadeIn(1000);?
$('.slider-item').removeClass('slider-item-selected');?
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');?
}? /**?*?开始轮播?
*/
function?start()?{?if(!hasStarted)?{?
hasStarted?=?true;?
interval?=?setInterval(next,?t);?
}?
}? /**?*?停止轮播?
*/
function?stop()?{?clearInterval(interval);?
hasStarted?=?false;?
}? //开始轮播? start();? });?</script>?
</head>?
<body>?
<div?>? <ul?>?<li?>?
<a?href="
?src="images/1.jpg"></a>?</li>?
<li?>?
<a?href="#"><img??src="images/1.jpg"></a>?</li>?
<li?>?
<a?href="#"><img??src="images/1.jpg"></a>?
</li>?
<li?>?
<a?href="#"><img??src="images/1.jpg"></a>?</li>?
</ul>? <div?>?<ul?>?
<li?>1</li>?
<li?>2</li>?
<li?>3</li>?
<li?>4</li>?
</ul>?
<div?>?
<a??href="javascript:;;"><</a>?
<a??href="javascript:;;">></a>?
</div>?
</div>? </div>?</body>?
</html>
关于jquery轮播思路的探讨就到这里 ，您是否还有其他想了解的内容？欢迎在评论区留言告诉我们，同时别忘了点击关注哦！
本文来自作者[霹雳吧]投稿，不代表霹雳吧立场，如若转载，请注明出处：https://lpl888.com/list-888/538.html
评论列表（3条）
我是霹雳吧的签约作者“霹雳吧”
本文概览：近期关于jquery轮播思路的讨论热度持续攀升，我们通过多方渠道收集整理了相关资讯，并进行了系统化的梳理。若这些内容恰好能为您提供参考，将是我们最大的荣幸。使用jQuery做轮...
文章不错《jquery轮播思路》内容很有帮助