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

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：图片代码 > 图片轮播难易：入门级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 40 积分

<!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="https://img14.360buyimg.com/da/jfs/t4021/152/1842776477/278711/87f3436d/589a9ff0N98892a7f.jpg" class="jd_ad_img">
	<img data-src="https://img30.360buyimg.com/da/jfs/t3832/19/3631783469/229904/d0cff380/589c3703N72d8e97a.jpg" class="jd_ad_img">
	<img data-src="https://img11.360buyimg.com/da/jfs/t3973/346/409628066/87744/79c44ed0/584e3a41N97774f20.jpg" class="jd_ad_img">
	<img data-src="https://img30.360buyimg.com/da/jfs/t3832/19/3631783469/229904/d0cff380/589c3703N72d8e97a.jpg" class="jd_ad_img">
	<img data-src="https://img13.360buyimg.com/da/jfs/t3079/202/6072785934/154200/14598a5f/589c0997N371cbfa8.jpg" class="jd_ad_img">
	<img data-src="https://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>

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

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