<div id="focus">
<ul>
<li><a href="#" target="_blank">
<img src="${currentWebSite.baseUrl}/images/banner.jpg" alt="" /></a></li>
<li><a href="#" target="_blank">
<img src="${currentWebSite.baseUrl}/images/banner2.jpg" alt="" /></a></li>
<li><a href="#" target="_blank">
<img src="${currentWebSite.baseUrl}/images/banner3.jpg" alt="" /></a></li>
</ul>
</div>
---------------------------------------js------------------------------------------------
$(function () {
var sWidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var picTimer;
var btn = "<div class='btnBg'></div><div class='btn'>";
for (var i = 0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity", 0);
$("#focus .btn span").css("opacity", 0.4).mouseenter(function () {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#focus .preNext").css("opacity", 0.0).hover(function () {
$(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
}, function () {
$(this).stop(true, false).animate({ "opacity": "0" }, 300);
});
$("#focus .pre").click(function () {
index -= 1;
if (index == -1) { index = len - 1; }
showPics(index);
});
$("#focus .next").click(function () {
index += 1;
if (index == len) { index = 0; }
showPics(index);
});
$("#focus ul").css("width", sWidth * (len));
$("#focus").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index++;
if (index == len) { index = 0; }
}, 2800);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index * sWidth;
$("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300);
$("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);
}
});
- 浏览: 18195 次
相关推荐
jquery幻灯片插件大小图片切换,兼容性好支持图片轮播切换
纯DIV+CSS做的三种图片滚动,轮播图片 1.2.3.4图片切换 电子相册
一个可以在Unity进行图片轮播的demo,只需要给一个texture 2d的图片数组就可以直接用,有多种切换特效
最好看的jquery 图片轮播图片切换特效,不管你信不信,反正我是信了。
JQUERY幻灯片图片轮播带进度条幻灯片图片切换
jQuery带标题的焦点图片轮播切换代码
jquery幻灯片图片轮播带进度条幻灯片图片切换
jquery广告图片轮播,修改简单,可直接用,图片大小可修改等等
js图片轮播 js特效 图片切换
jquery slider图片插件制作带文字遮罩图片轮播切换代码
jQuery自适应图片轮播代码_自适应图片切换代码
网站首页图片轮播切换效果实现,里面有js以及css以及示例
swiper.js移动端banner图片轮播插件制作带索引的左右按钮控制图片轮播切换、触屏滑动图片切换、响应式的图片切换代码。
jquery html5响应式图片轮播代码_响应式网站图片切换
js全屏图片轮播幻灯片UC浏览器官网焦点图片切换,通过原生javascript实现图片切换的效果,点击向左向右的箭头或者点击小图,都会使图片实现切换的效果,一般用于企业网站或者商城网站。php中文网推荐下载!
图片轮播素材 左右按钮切换 图片叠加
简单图片切换效果JS插件,效果比较简单,包含源代码,若需要复杂的切换效果,请自行...使用方法:一句代码调用,获取HTML页面中输出的UL列表内容自动生成图片轮播效果。兼容全浏览器。代码功能比较简单,纯属抛砖引玉。
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
jquery图片切换幻灯片缩略图片轮播切换
图片轮播,多张图片切换播放