Html
    Css
    Js

    
                        
ul {
	padding:0;
	margin:0;
}
li {
	list-style:none;
}
body {
	background:#333;
}
#pic {
	width:400px;
	height:500px;
	position:relative;
	margin:0 auto;
	background:url(3.jpg) no-repeat center black;
}
#pic img {
	width:400px;
	height:500px;
}
#pic ul {
	width:40px;
	position:absolute;
	top:0;
	right:-50px;
}
#pic li {
	width:40px;
	height:40px;
	margin-bottom:4px;
	background:#666;
}
#pic .active {
	background:#FFCC33;
}
#pic span {
	top:0;
}
#pic p {
	bottom:0;
	margin:0;
}
#pic p,#pic span {
	position:absolute;
	left:0;
	width:400px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#fff;
	background:black
}

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

图片点击切换

使用原生js  实现的 图片点击效果   没什么难度  不喜轻喷  谢啦~~

0