JQ实现新浪游戏首页幻灯片

JQ实现新浪游戏首页幻灯片

下面通过图文并茂的方式给大家展示下，JQ实现新浪游戏首页幻灯片代码，具体实现方式如下：

分享一款基于jquery的新浪游戏首页幻灯片，带左右箭头，选项卡缩略图，自动轮播切换的jQuery幻灯片代码。效果图如下：

html代码：

loading...

loading...

css代码：

/*通用全局设定*/

body, input, button, select, textarea, table {

font: 12px "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";

}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

margin: 0;

padding: 0;

}

fieldset, img {

border: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

ol, ul {

list-style: none;

}

input, button, select, textarea {

outline: none;

}

textarea {

resize: none;

}

a:link, a:visited, a:hover, a:active {

text-decoration: none;

}

/*幻灯*/

.Homeslide {

width: 490px;

height: 425px;

color: #666565;

overflow: hidden;

position: relative;

}

.Homeslide_hand0 {

width: 37px;

height: 53px;

position: absolute;

left: 0;

top: 93px;

background: url(http://n.sinaimg.cn/game/homepage/home_slide.png) 0 -53px;

cursor: pointer;

}

.Homeslide_hand0:hover {

background-position: 0 0;

}

.Homeslide_hand1 {

width: 37px;

height: 53px;

position: absolute;

right: 0;

top: 93px;

background: url(http://n.sinaimg.cn/game/homepage/home_slide.png) -37px -53px;

cursor: pointer;

}

.Homeslide_hand1:hover {

background-position: -37px 0;

}

.Homeslide_bigwrap {

width: 490px;

height: 318px;

position: relative;

}

.Homeslide_bigpicdiv {

width: 490px;

height: 248px;

}

.Homeslide_bigpicdiv_mask {

display: block;

width: 100%;

height: 40px;

line-height: 40px;

font-size: 16px;

text-indent: 15px;

position: absolute;

left: 0;

top: 209px;

color: #fff;

background: url(http://n.sinaimg.cn/game/homepage/home_slide.png) 0 74px;

}

.Homeslide_bigpicdiv img {

width: 100%;

height: 248px;

}

.Homeslide_detail {

height: 70px;

border-left: 1px solid #d2d2d2;

border-right: 1px solid #d2d2d2;

line-height: 2em;

}

.Homeslide_detail p {

width: 310px;

padding: 10px 25px 0 15px;

float: left;

height: 52px;

overflow: hidden;

}

.Homeslide_ralate {

height: 36px;

border-left: 1px solid #d2d2d2;

line-height: 1;

float: left;

padding-left: 26px;

margin-top: 16px;

}

.Homeslide_ralate a {

color: #ff6600;

}

.Homeslide_thumb {

height: 106px;

border: 1px solid #d2d2d2;

border-top: none;

background: #f2f2f2;

position: relative;

}

.Homeslide_angle {

width: 13px;

height: 7px;

position: absolute;

left: 55px;

top: -7px;

overflow: hidden;

display: none;

background: url(http://n.sinaimg.cn/game/homepage/angle.gif) -1px -1px;

}

.Homeslide_thumb ul {

position: absolute;

left: 0;

top: 0;

width: 10000px;

}

.Homeslide_thumb li {

width: 122px;

height: 95px;

float: left;

text-align: center;

line-height: 12px;

cursor: pointer;

position: relative;

padding-top: 11px;

color: #474747;

}

.Homeslide_thumb li.this {

background: #d2d2d2;

}

.Homeslide_thumb li.this .Homeslide_angle {

display: block;

}

.Homeslide_thumb li img {

width: 100px;

height: 59px;

display: block;

margin: 0 auto;

margin-bottom: 13px;

}

以上内容就是本文全部代码，需要的朋友可以参考下。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。