jQuery实现轮播,jquery制作轮播切换效果
本文操作环境：windows7系统、jquery-2.1.4版、戴尔自交第三代电脑
jquery怎么实现轮播效果？
框架代码实现图片轮播效果
文章写的不好，还请各位高手指教，不废话了，先上张效果图吧看下：
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
事件部分：通过框架的悬停()绑定鼠标上悬以及离开时的事件处理，jquery的绑定()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：上一页()、下一页()、播放()、开始()开始自动轮播，停止()停止自动轮播。
下篇是一个纯粹的框架轮播插件，该插件可以定制各种效果，方便的配置以及可扩展。
下面是整体的代码：
index.html
[html]查看纯文本
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
titlejquery轮播效果图/标题
脚本类型= text/JavaScript src= scripts/jquery-1。9 .1 .js /脚本
style type=text/css
* {
填充：0px
边距：0px
}
一个{
文字-装饰：无；
}
ul {
列表样式：外部无无；
}。滑块，滑动面板图像。滑块-额外{
宽度：650像素
身高：413像素
}。滑块{
文本对齐：居中；
边距：30px自动；
位置：相对；
}。滑块面板，滑块-导航，滑块-前置，滑块-下一个{
位置：绝对；
z指数：8;
}。滑块面板{
位置：绝对；
}。滑动面板图像{
边框：无；
}。滑块-额外{
位置：相对；
}。滑块-导航{
左边距：-51px；
位置：绝对；
左：50%;
底部：4px
}。滑块-导航李{
背景：# 3e3e3e
边界半径：50%;
颜色：# fff
光标：指针；
边距：0 2px
溢出：隐藏；
文本对齐：居中；
显示：内嵌-块；
高度：18px
行高：18px
宽度：18px
}。滑块导航。滑块-项目-已选择{
背景：蓝色；
}。滑块-页面一个{
背景：rgba(0，0，0，0.2)；
过滤器：progid:DXImageTransform .微软。渐变(startColorstr=# 33000000，endColorstr=# 33000000)；
颜色：# fff
文本对齐：居中；
显示：块；
font-family: simsun ；
字体大小：22px
宽度：28px
身高：62px
行高：62px
margin-top:-31px；
位置：绝对；
top:50%；
}。滑块-页面答：悬停{
背景：rgba(0，0，0，0.4)；
过滤器：progid:DXImageTransform .微软。渐变(startColorstr=# 66000000，endColorstr=# 66000000)；
}。滑块-下一个{
左：100%;
左边距：-28px；
}
/风格
脚本类型=文本/javascript
$(文档)。ready(function() {
不同长度，
currentIndex=0，
区间，
hasStarted=false，//是否已经开始轮播
t=3000//轮播时间间隔
长度=$(。滑块-面板)。长度；
//将除了第一张图片隐藏
$(.滑块面板：not(:first)).hide()；
//将第一个滑块项目设为激活状态
$(.slider-item:first’).add class(" slider-item-selected ")；
//隐藏向前、向后翻按钮
$(.滑块-页面)。hide()；
//鼠标上悬时显示向前、向后翻按钮，停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$(.滑块面板，滑块-前置，滑块-下一个)。hover(function() {
stop()；
$(.滑块-页面)。show()；
}，function() {
$(.滑块-页面)。hide()；
start()；
});
$(.滑块-项目)。悬停（功能(e) {
stop()；
var preIndex=$( .滑块-项目)。过滤器(。滑块-项目-选定的)。index()；
currentIndex=$(this).index()；
play(preIndex，当前索引)；
}，function() {
start()；
});
$(.滑块-前)。取消绑定("单击");
$(.滑块-前)。bind(click ，function() {
pre()；
});
$(.滑块-下一个)。取消绑定("单击");
$(.滑块-下一个)。bind(click ，function() {
next()；
});
/**
* 向前翻页
*/
函数pre() {
var preIndex=currentIndex
当前索引=( -当前索引长度)%长度
play(preIndex，当前索引)；
}
/**
* 向后翻页
*/
函数下一个(){
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。