最新JS实现京东商城首页幻灯片切换效果

2017最新JS实现京东商城首页幻灯片切换效果,喜欢的同学可以下载研究一下哦。

淘建站为您提供更多_图片代码_图片轮播_幻灯片_切换，在此特别感谢您对我们的支持与厚爱！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>最新JS实现京东商城首页幻灯片切换效果、素材圈素材网</title>
</head>
<body>
<!-- 代码begin -->
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

.jd_ad_slide {width: 670px; height: 400px; margin:0 auto; overflow:hidden;position: relative;} 
.jd_ad_img {position: absolute; left: 0; top: 0;width: 100%; height: 100%;display: none; background:url(http://www.lanrenzhijia.com/demo/images/loading.gif) no-repeat center center;}
.jd_ad_btn {position: absolute; right: 3px; bottom: 8px;}
.jd_ad_btn_a {width: 22px; height: 22px;line-height: 22px;margin-right: 5px;text-align: center;border-radius: 11px;background: #999;color: #fff;float: left; text-decoration:none;}
.jd_ad_btn_a:hover {text-decoration: none;}
.jd_ad_btn .active {background: #E4393C;}
</style>
<div id="jdAdSlide" class="jd_ad_slide">
	<img src="http://img14.360buyimg.com/da/jfs/t4021/152/1842776477/278711/87f3436d/589a9ff0N98892a7f.jpg" class="jd_ad_img">
	<img data-src="http://img30.360buyimg.com/da/jfs/t3832/19/3631783469/229904/d0cff380/589c3703N72d8e97a.jpg" class="jd_ad_img">
	<img data-src="http://img11.360buyimg.com/da/jfs/t3973/346/409628066/87744/79c44ed0/584e3a41N97774f20.jpg" class="jd_ad_img">
	<img data-src="http://img30.360buyimg.com/da/jfs/t3832/19/3631783469/229904/d0cff380/589c3703N72d8e97a.jpg" class="jd_ad_img">
	<img data-src="http://img13.360buyimg.com/da/jfs/t3079/202/6072785934/154200/14598a5f/589c0997N371cbfa8.jpg" class="jd_ad_img">
	<img data-src="http://img30.360buyimg.com/da/jfs/t3832/19/3631783469/229904/d0cff380/589c3703N72d8e97a.jpg" class="jd_ad_img">
	<div id="jdAdBtn" class="jd_ad_btn"></div>
</div>
<script src="jquery.js"></script>
<script src="jd.js"></script>
<script>
var htmlAdBtn = '';
$("#jdAdSlide img").each(function(index, image) {
	var id = "adImage" + index;
	htmlAdBtn = htmlAdBtn + '<a href="javascript:" class="jd_ad_btn_a" data-rel="'+ id +'">'+ (index + 1) +'</a>';
	image.id = id;
});
$("#jdAdBtn").html(htmlAdBtn).find("a").powerSwitch({
	eventType: "hover",
	classAdd: "active",
	animation: "fade",
	autoTime: 5000,
	onSwitch: function(image) {
		if (!image.attr("src")) {
			image.attr("src", image.attr("data-src"));	
		}
	}
}).eq(0).trigger("mouseover");
</script>
<!-- 代码end -->
</body>
</html>