完美的jQuery图片切换效果的简单实现

结果如下：

Css：

体{字体微软雅黑；}
体、UL、李、IMG、H3、DL、DD，DT，h1 { margin: 0px；padding: 0px；列表样式：无；}。
img {垂直对齐：顶；}
大***开关
。scroll_view {保证金：为0px auto；溢出：隐藏；位置：相对；}
李：绝对位置。photo_view {；宽度：100%；}
。photo_view李EM。photo_view李h3 { position:绝对；底：0px；Z指数：1；高度：35px；下：100%；}；}
李。photo_view EM { Z指数：1；背景：RGBA（0,0,0,0.5）；过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =50000000#，endcolorstr =# 50000000）；} }。
。photo_view李H3 { Z指数：2；文本缩进：1em；字体重量：正常；}
李。photo_view H3一{颜色：# FFF；}
李：哈弗H3。photo_view {颜色：# F60；}
。small_photo {位置：绝对；底：40px；右：10px；鼠标指针；Z指数：4；}
。small_photo李{浮动：左；填充右：10px；}
。small_photo李IMG {宽80px；身高：35px；边界：固体2px # CCC；边界半径：2px；}
。small_photo li.active img { border:固体2px # F60；}

HTML：

Picture effect 1
画面效果2
画面效果3
画面效果4

Js：

fn.extend（{美元。
imgscroll：功能（选项）{
VaR DEF = { phtot_parent：$（。scroll_view ），photo_view：$（。photo_view ），small_photo：$（。small_photo ），速度：800，isauto：真的，宽度：800，高度：349 }，
扩展（DEF，{，选项），
photo_view = opt.photo_view美元，
small_photo = opt.small_photo美元，
速度= opt.speed，
isauto = opt.isauto，
索引= 0，
_length = $ photo_view.find（里的长度），
strtime = null；
opt.phtot_parent.css（{宽度：opt.width，高度：选择。高度}）；
photo_view.find美元（李：不（：一））。隐藏（） / /。找到（IMG）藏（）；
photo_view.find美元（礼），每个（功能（我）{）
small_photo.append美元（' '）；
}）
small_photo.find美元（李：第一），AddClass（主动）；
一个小图/鼠标动作。
small_photo.find美元（礼），Bind（MouseEnter
ClearInterval（strtime）；
如果（索引）！= $（this）（（index））{
索引= $（this）；
动画（索引）
}
}）。Bind（MouseLeave
如果（isauto）{
开始（）；
}
}）；
大悬停动作
photo_view.find美元（礼），Bind（MouseEnter
ClearInterval（strtime）；
}）。Bind（MouseLeave
如果（isauto）{
开始（）；
}
}）；
自动播放
如果（isauto）{
开始（）；
}
自动开始播放
函数start（）{
strtime = setInterval（）{（）函数（
指数= 0：指数+ > = _length-1；
动画（索引）；
}速度）；
}
动画
动画函数（_index）{ / / console.log（_index）
small_photo.find美元（礼），Eq（_index）。AddClass（主动的），兄弟姐妹（RemoveClass）（主动）； / /改变小地图的导航风格
photo_view.find美元（礼），Eq（_index）。Css（Z，1）（兄弟姐妹），Css（Z，0）； / /绝对电平控制
photo_view.find美元（礼），Eq（_index）。显示（找）（IMG）（。CSS：0 } {透明度）； / /把图片不透明度设置为0
photo_view.find美元（礼），Eq（_index）。找到（IMG）。动画（{ 1 }，不透明度：300，函数（）{）{
$（这）。RemoveAttr（风格）； / /删除不透明度动画
photo_view.find美元（礼），Eq（_index）。显示（兄弟姐妹）（隐藏）（）； / /显示图片
}）；显示当前动画显示
}
}
}）；

（（$函数）{ $（scroll_view）。ImgScroll（{ photo_view：$（。photo_view ），small_photo：$（。small_photo ），速度：3000，isauto：true}）；
}）

这个简单的实现了完美的图片切换效果，萧边分享了你的全部内容。我希望能给你一个参考，希望你能支持它。