一款带左右箭头按钮左右滑动切换的jQuery幻灯特效
时间:2018-07-26 15:09 来源:酷站代码
特效简介
焦点图花样繁多，最普通的就是图片加下面一排数字按钮了。这样的在前面已经做过几个，再有的变化就只是样式上的，结构和实现方法没有大的不同，就不浪费各位看客的时间了。以后也尽量会找一些新鲜、不常见的效果来仿。
可以看到，除了“上一页”、“下一页”按钮外，其它均和以前的实例相仿，所以结构还是我们的“焦点图万能结构”，按钮就交给jQuery来完成。
jQuery代码：
btn += "<div class='preNext pre'></div><div class='preNext next'></div>"; //btn是之前实例中定义过的，在这里追加俩按钮
//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300); //鼠标移入透明度变为0.5
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300); //鼠标移入透明度变为0.2
});
//上一页按钮
$("#focus .pre").click(function() {
index -= 1; //下一页按钮，鼠标点击后先让index值加1
if(index == -1) {index = len - 1;} //如果index-1后的值为-1，说明当前图片index是0，即第一张图片，那么接下来就该显示最后一张图片，即index值为len-1
showPics(index); //根据索引值显示相应图片，下同
});
//下一页按钮
$("#focus .next").click(function() {
index += 1; //上一页按钮，鼠标点击后先让index值减1
if(index == len) {index = 0;} //如果index+1后的值为图片个数，说明当前图片index是len，即最后一张图片，那么接下来就该显示第一张图片，即index值为0
showPics(index);
});
这里只有增加的两个按钮的相关代码，其它部分和以前实例相同，这里也不再列出，完整代码可以查看演示页源文件。
焦点图常用的也就这几种形式了，结构和实现方法贴得比较乏味，以后差不多的例子就直接上演示页不解释……
作者/来源：54173BLOG
0
下载说明
· 本站下载链接均为网盘下载（百度网盘 & 微云网盘）；
· 推荐使用第三方专业下载工具下载本站软件，使用 WinRAR v3.10 以上版本解压本站软件；
· 如果这个软件总是不能下载的请点击报告错误,谢谢合作!!
· 下载本站资源，如果服务器暂不能下载请过一段时间重试！
· 本站提供的一些商业软件是供学习研究之用，如用于商业用途，请购买正版。