Html
    Css
    Js
@charset "utf-8";
	/* CSS Document */
* {
	margin:0;
	padding:0;
	font-family:微软雅黑;
	font-size:24px;
}
/*框*/
.div01 {
	width:500px;
	height:300px;
	position:absolute;
	overflow:hidden;
}
/*照片框*/
.div02 {
	width:calc(500px*8);
	height:300px;
	position:absolute;
	z-index:5;
}
.slideimg {
	display:none;
}
.cimg {
	display:block;
}
/*左右键*/
.abt {
	display:block;
	width:30px;
	height:60px;
	z-index:9;
	opacity:0.3;
	line-height:60px;
	text-align:center;
	background-color:gray;
	color:white;
}
#lefta {
	position:absolute;
	left:0px;
	top:40%;
}
#righta {
	position:absolute;
	right:0px;
	top:40%;
}
.abt:hover {
	opacity:0.6;
	cursor:pointer;
}
/**/
#slideblock {
	padding:3px 3px;
	z-index:20;
	border-radius:8px;
	position:absolute;
	left:25%;
	bottom:20px;
	width:213px;
	height:12px;
	background-color:#eaeaea;
	opacity:0.8;
}
#slideblock ol {
	list-style:none;
	float:left;
	width:12px;
	height:12px;
	margin-left:13px;
	border-radius:100%;
	background-color:white;
}
#slideblock ol.selected {
	background-color:red;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

京东图片轮播

思路:当前图片display为block,其他图片display为none;设计类选择器.cimg { display:block;},设计.slideimg { display:none; },所有图片都要.slideimg,只有的当前要显示的图片有.cimg

4
      唐诚0
      2017/10/31 14:30:10

      插件只需要简介的 不是这种坑爹的

      回复
      Annie0
      2017/4/21 9:13:06
      代码量过多    有简单的方法  想一想  =_= 回复
      ~、唯爱~0
      2017/4/7 17:42:27
      海淀蜘蛛侠0
      2017/4/7 15:43:22