最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/js/1137.html 二当家的 2017-02-12 22:26浏览(844)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

最新JS实现京东商城首页幻灯片切换效果
分类:图片代码 > 图片轮播 难易:入门级
查看演示 下载资源: 7

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1137.html
评论1
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

  • 头像 沙发
    02-14 10:11
    lzw0411
    实现京东商城首页
1 2