多图片左右切换功能前端实现

最新推荐文章于 2024-02-20 00:03:41 发布

置顶

VIP文章最骚的就是你

最新推荐文章于 2024-02-20 00:03:41 发布

阅读量6.8k

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/52108219

版权

下载地址：http://download.csdn.net/detail/cometwo/9594633

可以试试这个：http://www.sucaihuo.com/js/655.html

原文地址：http://www.cnblogs.com/starof/p/5732097.html

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css" />
		<!--页面初始化CSS和页面公用头部的css-->
		<style type="text/css">
			@charset "utf-8";
			html,
			body {
				background-color: #f6f5f5;
			}
			
			.vg-body {
				width: 1390px;
				margin: 0 auto;
			}
			/*任务成长值*/
			
			.vg_title {
				font-size: 24px;
				line-height: 24px;
				padding: 20px 0;
				color: #464646;
			}
			
			.vg_task {
				background-color: #fff;
				position: relative;
			}
			
			.vg_task .arrowbtn-left,
			.vg_task .arrowbtn-right {
				position: absolute;
				top: 70px;
				width: 16px;
				height: 20px;
				cursor: pointer;
			}
			
			.vg_task .arrowbtn-left {
				left: 40px;
				border: 1px solid red;
				background: url(../images/arrow-left.png) no-repeat;
				;
			}
			
			.vg_task .arrowbtn-right {
				right: 40px;border: 1px solid red;
				background: url(../images/arrow-right.png) no-repeat;
				;
			}
			
			.vg_tasklist {
				width: 1200px;
				overflow: hidden;
				margin: 0 auto;
			}
			
			.vg_tasklist ul {
				width: 999%;
			}
			
			.vg_tasklist li {
				width: 258px;
				height: 130px;
				float: left;
				border: 1px solid #c8c8c8;
				margin: 15px 53px 15px 0;
				position: relative;
			}
			
			.vg_tasklist li .task_hover {
				position: absolute;
				left: -1px;
				top: -1px;
				width: 212px;
				padding: 20px 25px 20px 23px;
				height: 90px;
				border-bottom: 2px solid #e65a5a;
				overflow: hidden;
				background-color: #f0f0f0;
				display: none;
			}
			
			.vg_tasklist li:hover .task_hover {
				display: block;
			}
			
			.task_hover .task_desc {
				font-size: 16px;
				line-height: 20px;
				color: #646464;
			}
			
			.task_hover .task_limittimes {
				font-size: 14px;
				color: #787878;
				float: left;
				padding-top: 12px;
			}
			
			.vg_tasklist li img {
				float: left;
				margin: 22px 8px 20px 20px;
			}
			
			.vg_tasklist li .rightinfo {
				width: 136px;
				float: left;
				text-align: center;
			}
			
			.rightinfo h3 {
				font-size: 16px;

最低0.47元/天解锁文章

最骚的就是你

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
多图片左右切换功能前端实现

原文地址：http://www.cnblogs.com/starof/p/5732097.html @charset "utf-8"; html, body { background-color: #f6f5f5; } .vg-body { wid
复制链接

扫一扫