提交 43cca2c3 编写于 作者: xchenhao's avatar xchenhao

rm useful material

上级 f4e4aed5
*{padding: 0;margin: 0}
body{background: #000;}
@font-face {/*左右箭头按钮的字体库*/
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
#displayBox{/*显示框*/
width: 1020px;
height: 555px;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow: 0 6px 15px rgba(255,255,255,0.5);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
#displayBox #scrollBox{/*显示框>滚动的箱子*/
/*width: 5100px;*/
/*width: 6220px;*/
width: 6250px;
height: 555px;
position: absolute;
left: 0;
top: 0;
}
#displayBox #scrollBox img{/*显示框>滚动的箱子>装下的图片*/
width: 1020px;
height: 555px;
float: left;
}
#displayBox #scrollBtn{/*显示框>小圆点按钮组*/
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -68px;
}
#displayBox #scrollBtn li{
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(255,255,255,0.6);
cursor: pointer;
float: left;
margin-right: 15px;
list-style: none;
}
#displayBox #scrollBtn li:last-child{
margin-right: 0;
}
#displayBox #scrollBtn li.cur{/*相应图片显示时对应的小圆点按钮变红*/
background: red;
box-shadow: 0 0 2px gold;
}
#displayBox .arrowBtn{/*显示框>小箭头按钮前后退功能*/
display: block;
width: 36px;
height: 60px;
background: rgba(255,255,255,0.3);
position: absolute;
top: 50%;
margin-top: -60px;
font-size: 30px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 60px;
text-decoration: none;
}
#displayBox .arrowBtn.left{
/*left: 0;*/
left: -36px;
}
#displayBox .arrowBtn.right{
/*right: 0;*/
right: -36px;
}
#displayBox .arrowBtn:hover{
color: red;
background: rgba(255,255,255,0.8);
}
\ No newline at end of file
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Sun Apr 9 19:39:08 2017
By admin
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
panose-1="2 0 6 3 0 0 0 0 0 0"
ascent="896"
descent="-128"
x-height="792"
bbox="-6 -204 1024 897"
underline-thickness="0"
underline-position="0"
unicode-range="U+0078-F0179"
/>
<missing-glyph
/>
<glyph glyph-name=".notdef"
/>
<glyph glyph-name=".null" horiz-adv-x="0"
/>
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
/>
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="gouwuchekong" unicode="&#xf0179;" horiz-adv-x="1028"
d="M333 105q19 0 36.5 -7t30.5 -19.5t20.5 -30t7.5 -37t-7.5 -37t-20.5 -30.5t-30.5 -20.5t-36.5 -7.5q-21 0 -38 7.5t-30 20.5t-20.5 30.5t-7.5 37t7.5 37t20.5 30t30 19.5t38 7zM758.5 103q19.5 0 37.5 -7t31 -20t20.5 -30t7.5 -36.5t-7.5 -37t-20.5 -30.5t-31 -20.5
t-37.5 -7.5t-36.5 7.5t-30 20.5t-20.5 30.5t-7.5 37t7.5 36.5t20.5 30t30 20t36.5 7zM931 685q28 0 44 -7.5t23 -19t6.5 -24t-4 -22t-13.5 -38t-22 -63t-23.5 -68t-18.5 -53.5q-14 -41 -34 -57t-49 -16h-36h-66h-86h-96h-254l14 -92h518q49 0 49 -42q0 -20 -10 -35.5
t-38 -14.5h-50h-94h-119h-119h-100h-55q-20 0 -34 9.5t-23.5 24t-15 32t-8.5 32.5q-1 7 -5.5 30.5t-11 58.5t-15 78.5t-16.5 87.5q-19 104 -44 231h-77q-15 0 -25.5 7.5t-17 18.5t-9 23t-2.5 22q0 21 14 34.5t37 12.5h103q21 0 33.5 -6.5t19.5 -15.5t10 -19t5 -17
q2 -8 4 -23l4 -30q3 -18 6 -39h701zM893 594l-641 2l36 -185l535 -1z" />
<glyph glyph-name="jiantou" unicode="&#xe61d;"
d="M799 312q-2 3 -5 6l-439 439q-7 7 -16.5 7t-16.5 -7l-70 -69q-7 -7 -7 -17t7 -16l353 -353l-353 -353q-7 -7 -7 -16.5t7 -16.5l70 -70q7 -7 16.5 -7t16.5 7l369 369v0l70 70l2 2q9 11 3 25z" />
<glyph glyph-name="liwu" unicode="&#xe862;"
d="M957 493q0 19 -13.5 32.5t-32.5 13.5h-115q46 43 55 86q9 41 -16 76q-32 46 -85 46q-26 0 -56 -12.5t-41 -20.5t-18 -14h-1q-9 -8 -23 -21t-45 -49t-50 -70q-18 38 -68 89q-29 29 -56 51q-7 6 -18.5 14t-41.5 20.5t-55 12.5q-53 0 -85 -46q-25 -35 -17 -76q10 -43 55 -86
h-120q-19 0 -32.5 -13.5t-13.5 -32.5v-195h59v-385v-6v-3q0 -19 13.5 -32.5t32.5 -13.5h687q19 0 32.5 13.5t13.5 32.5v3v6v385h55v195zM667 661q14 11 37.5 22.5t45.5 11.5q26 0 43 -23q12 -17 8 -37q-5 -25 -31 -50.5t-52 -42.5q-35 -2 -68 -3h-87q38 66 104 122zM308 542
q-26 17 -51.5 42.5t-31.5 50.5q-4 20 8 37q17 23 44 23q21 0 45 -11.5t37 -22.5q32 -26 65.5 -61.5t45.5 -60.5h-94q-33 1 -68 3zM176 298h309v-385h-309v385zM850 -87h-312v385h312v-385z" />
<glyph glyph-name="shouji" unicode="&#xe62a;"
d="M275 447v-43l288 253h-50zM275 538v-39l191 168h-33zM826 -55q0 -59 -41 -100.5t-100 -41.5h-348q-59 0 -100 41.5t-41 100.5v707q0 59 41 100t100 41h348q58 0 99.5 -41t41.5 -100v-707v0zM767 687h-512v-730h512v730zM516.5 -77q-19.5 0 -33 -13.5t-13.5 -32.5
t13.5 -32.5t33 -13.5t33 13.5t13.5 32.5t-13.5 32.5t-33 13.5z" />
<glyph glyph-name="yiyuangou" unicode="&#xe61f;"
d="M510 747q91 0 174 -35t142.5 -95t95 -143t35.5 -174t-35.5 -174t-95 -143t-142.5 -95t-174 -35t-174 35t-143 95t-95.5 143t-35.5 174t35.5 174t95.5 143t143 95t174 35v0zM546 517h-34q-14 -27 -47 -56.5t-77 -50.5v-50q25 9 55.5 27t49.5 36v-334h53v428v0z" />
<glyph glyph-name="dingwei" unicode="&#xe663;"
d="M526 797q-92 0 -170 -44.5t-123.5 -120.5t-45.5 -165q0 -61 18 -129.5t44 -128t62.5 -121.5t67 -106t64.5 -87t47.5 -59t22.5 -25l13 -15l14 15q9 9 22.5 25t47 59t64.5 87.5t67 106.5t62.5 121.5t44 128t17.5 128.5q0 89 -45.5 165t-123.5 120.5t-170 44.5v0zM526 -150
q-26 31 -55 67.5t-76.5 107t-82.5 138t-61.5 150.5t-26.5 154q0 122 88.5 208t213.5 86t214 -86t89 -208q0 -70 -26.5 -153t-62 -150.5t-82.5 -138t-76 -107.5t-56 -68v0zM530 589q-53 0 -91 -37t-38 -89t38 -89t91.5 -37t91.5 37t38 89t-38 89t-92 37v0zM530 372
q-38 0 -65.5 27t-27.5 64.5t27.5 64t66 26.5t65.5 -26.5t27 -64t-27 -64.5t-66 -27v0z" />
<glyph glyph-name="15tian" unicode="&#xe605;"
d="M953 500q-35 83 -99 147t-147 99q-85 36 -179 36t-180 -36q-83 -35 -147 -99t-99 -147q-37 -86 -37 -180q0 -90 33.5 -172.5t96.5 -147.5l22 21q-58 61 -89.5 138t-31.5 161q0 88 34 168q33 78 92.5 137.5t137.5 92.5q80 34 167.5 34t167.5 -34q78 -33 137.5 -92.5
t92.5 -137.5q34 -80 34 -167.5t-34 -167.5q-33 -78 -92.5 -137.5t-137.5 -92.5q-80 -34 -167 -34q-80 0 -154 28l-11 -28q79 -31 165 -31q94 0 179 37q83 35 147 99t99 147q37 85 37 179t-37 180zM428 115v399h-63q-40 -71 -142 -112v-69q70 23 125 67v-285h80zM655 167
q-57 0 -70 64l-79 -19q28 -102 149 -102q143 4 146 134q-5 120 -127 125q-45 0 -79 -24l9 98h177v67h-245l-15 -224l66 -2q21 27 67 29q66 -2 68 -74q-4 -67 -67 -72z" />
<glyph glyph-name="chongzhi" unicode="&#xe67c;"
d="M62 497v111q0 23 16.5 39t39.5 16h778q23 0 39.5 -16t16.5 -39v-111h-890v0zM62 441v-444q0 -23 16.5 -39.5t39.5 -16.5h632q-27 20 -43 50.5t-16 65.5q0 59 42 101t101 42q36 0 67 -17t51 -45v303h-890zM368 52h-222q-12 0 -20 8t-8 19.5t8 20t20 8.5h222q12 0 20 -8.5
t8 -20t-8 -19.5t-20 -8zM424 163h-278q-12 0 -20 8.5t-8 20t8 19.5t20 8h278q11 0 19 -8t8 -19.5t-8 -20t-19 -8.5zM590 163h-55q-12 0 -20 8.5t-8 20t8 19.5t20 8h55q12 0 20 -8t8 -19.5t-8 -20t-20 -8.5zM836 -67q-51 0 -86.5 36t-35.5 86.5t35.5 86t86 35.5t86.5 -35.5
t36 -86t-36 -86.5t-86 -36v0zM871 54v-12h-28v-15h28v-11h-28v-23h-14v23h-28v11h28v15h-28v12h24l-30 51h16q21 -38 25 -48h1q1 4 8 16l17 32h15l-30 -51h24v0zM836 155q-42 0 -71 -29t-29 -70.5t29 -71t70.5 -29.5t71 29.5t29.5 71t-29.5 70.5t-70.5 29v0z" />
<glyph glyph-name="chevron-copy" unicode="&#xe620;"
d="M249 362l479 -480q11 -10 25.5 -10t25 10.5t10.5 25t-10 25.5l-456 456l448 448q11 10 11 24.5t-10.5 24.5t-24.5 10t-25 -10l-465 -466q-1 0 -4 -6q-1 0 -2 -0.5t-2 -1.5q-10 -10 -10 -25t10 -25z" />
<glyph glyph-name="chevron-copy-copy-copy-copy-copy-copy" unicode="&#xe624;"
d="M775 406l-479 480q-11 10 -25.5 10t-25 -10.5t-10.5 -25t10 -25.5l456 -456l-448 -448q-11 -10 -11 -24.5t10.5 -24.5t24.5 -10t25 10l465 466q1 0 4 6q1 0 2 0.5t2 1.5q10 10 10 25t-10 25z" />
<glyph glyph-name="xiaoxizhongxin" unicode="&#xe606;"
d="M48 669v-395q0 -57 40.5 -98t98.5 -41h208l7 -175l205 175h234q58 0 98.5 41t40.5 98v395q0 58 -40.5 98.5t-98.5 40.5h-654q-58 0 -98.5 -40.5t-40.5 -98.5v0zM647 449.5q0 27.5 19.5 47t46.5 19.5t46.5 -19.5t19.5 -47t-19.5 -46.5t-46.5 -19t-46.5 19t-19.5 46.5z
M446 449.5q0 27.5 19.5 47t46.5 19.5t46.5 -19.5t19.5 -47t-19.5 -46.5t-46.5 -19t-46.5 19t-19.5 46.5zM249 449.5q0 27.5 19 47t46.5 19.5t46.5 -19.5t19 -47t-19 -46.5t-46.5 -19t-46.5 19t-19 46.5z" />
<glyph glyph-name="u-arrow3-right" unicode="&#xe68e;" horiz-adv-x="1000"
d="M607 39l312 313q18 18 18 44t-18 44l-312 313q-19 18 -44.5 18t-44 -18.5t-18.5 -44t18 -44.5l206 -206h-599q-26 0 -44.5 -18t-18.5 -44t18.5 -44.5t44.5 -18.5h599l-206 -205q-18 -19 -18 -44.5t18.5 -44t44 -18.5t44.5 18v0z" />
<glyph glyph-name="yijiuhuanxin" unicode="&#xe603;"
d="M441 484h171v-221h-171v221zM441 508v-3h3h168v3q0 8 -5.5 13t-12.5 5h-135q-8 0 -13 -5t-5 -13zM441 242v-4q0 -7 5 -12.5t13 -5.5h135q7 0 12.5 5.5t5.5 12.5v4h-168h-3zM1007.5 613.5q-16.5 94.5 -95.5 173t-173 94t-228.5 15.5t-229 -15.5t-172.5 -94t-93.5 -173
t-15.5 -229.5t15.5 -229.5t93.5 -173t172.5 -94t229 -15.5t228.5 15.5t173 94t95.5 173t16.5 229.5t-16.5 229.5zM223 292q-11 40 -11 82q0 106 64.5 189.5t164.5 110.5v34l95 -42l-95 -41v27q-91 -27 -149.5 -104t-58.5 -174q0 -36 9 -71zM594 548q16 0 27.5 -11.5
t11.5 -28.5v-3v-24v-221v-18v-4q0 -16 -11.5 -27.5t-27.5 -11.5h-135q-17 0 -28 11.5t-11 27.5v4v18v221v24v3q0 17 11 28.5t28 11.5h135zM522 63q-65 0 -123 25.5t-101 70.5l-27 -16l-12 104l83 -62l-25 -15q85 -85 205 -85q121 0 206 86l19 -11q-43 -45 -101.5 -71
t-123.5 -26zM767 208l12 104l22 -13q11 37 11 75q0 99 -60.5 176.5t-154.5 102.5v22q103 -25 169.5 -109t66.5 -192q0 -44 -12 -86l30 -18z" />
<glyph glyph-name="sanjiaoxing-copy" unicode="&#xe607;"
d="M219 718l586 -339l-586 -339v678z" />
<glyph glyph-name="tian" unicode="&#xe6c5;"
d="M499 189l133 299v67h-218l-1 -56l160 1l-134 -311h60v0zM795 615l-83 -156l110 28q15 -59 15 -103q0 -88 -43 -162t-117 -117t-161.5 -43t-162 43t-117.5 117t-43 161.5t43 162t117.5 117.5t161.5 43q55 0 106 -18q6 19 12 40q-56 20 -118 20q-99 0 -183 -49
t-132.5 -132.5t-48.5 -182.5t48.5 -182.5t132.5 -132.5t182.5 -49t182.5 49t132.5 132.5t48.5 182.5q0 130 -83 231z" />
<glyph glyph-name="sousuo-sousuo" unicode="&#xe612;"
d="M717 682q-69 69 -160.5 93t-183 0t-160 -92.5t-92.5 -160t0 -183t93 -160.5q51 -51 117.5 -77.5t134 -26.5t134 26.5t117.5 77.5v0q68 69 92.5 160.5t0 183t-92.5 159.5v0zM136.5 102q-89.5 89 -121.5 209t0 239.5t121.5 209t209 121.5t239.5 0t209.5 -121.5t121 -209
t0 -239.5t-121 -209t-209.5 -121t-239.5 0t-209 121zM1005.5 -109.5q-18.5 -18.5 -45 -18.5t-45.5 19l-89 89q-19 19 -19 45.5t18.5 45t45 18.5t44.5 -19l90 -90q19 -18 19 -44.5t-18.5 -45z" />
<glyph glyph-name="weixiu" unicode="&#xe608;"
d="M309 426q-25 0 -43 18l-170 172q-6 6 -6 14.5t6 14.5t14 6t14 -6l170 -172q6 -6 14.5 -6t14.5 6l96 97q6 6 6 14.5t-6 14.5l-170 172q-6 6 -6 14.5t6 14.5t14.5 6t14.5 -6l170 -172q17 -18 17 -43.5t-17 -43.5l-96 -97q-18 -18 -43 -18zM843.5 -64q-48.5 0 -83.5 35
l-248 251q-6 6 -6 14.5t6 14.5t14.5 6t14.5 -6l248 -251q23 -22 54.5 -22t54 22.5t22.5 54.5t-23 55l-247 250q-6 6 -6 14.5t6 15t14 6.5t14 -6l248 -251q34 -35 34 -84t-34 -84t-82.5 -35zM385 181q-63 0 -122 24.5t-105 71.5q-70 71 -88.5 170.5t22.5 191.5q3 8 11 11
t15.5 -0.5t10.5 -11.5t0 -16q-35 -80 -19 -167t77 -149q66 -67 157 -80.5t173 30.5q8 4 16 1.5t12 -10t1.5 -15.5t-10.5 -12q-71 -39 -151 -39zM681 427h-4q-8 2 -13 9t-3 15q13 70 -7 138t-70 119q-61 62 -147.5 78t-165.5 -20q-7 -3 -15 0t-11.5 11t-0.5 16t11 11
q90 41 189 22.5t169 -89.5q57 -58 80 -136t8 -158q-4 -16 -20 -16z" />
<glyph glyph-name="dianhuaqia" unicode="&#xe77c;"
d="M891 589v0.5v1.5t-1 3q-1 4 -4 8v0v0l-259 278q-1 1 -2 1q-6 8 -16 8h-470q-29 0 -50 -23t-21 -55v-854q0 -32 21 -55t50 -23h680q30 0 51 23t21 55v631v0.5v0.5zM819 -81h-680q-12 0 -21 11.5t-9 26.5v854q0 15 9 26.5t21 11.5h461l250 -269v-623q0 -15 -9 -26.5
t-22 -11.5zM725 391h-491q-21 0 -35.5 -15t-14.5 -35v-322q0 -20 14.5 -35t35.5 -15h491q20 0 35 15t15 35v322q0 20 -15 35t-35 15zM734 19q0 -9 -9 -9h-491q-9 0 -9 9v322q0 3 2.5 6t6.5 3h491q9 0 9 -9v-322zM667 242h-71v62q0 9 -6 15t-14.5 6t-14.5 -6t-6 -15v-62h-281
q-8 0 -14 -6t-6 -14.5t6 -14.5t14 -6h393q9 0 15 6t6 14.5t-6 14.5t-15 6zM667 153h-393q-8 0 -14 -6t-6 -14.5t6 -14.5t14 -6h72v-62q0 -9 6 -15t14.5 -6t14.5 6t6 15v62h280q9 0 15 6t6 14.5t-6 14.5t-15 6z" />
</font>
</defs></svg>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
</head>
<link rel="stylesheet" type="text/css" href="css/scroll.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<body>
<div id="displayBox"><!--显示框-->
<div id="scrollBox"><!--显示框>滚动的箱子-->
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/1.jpg"><!--复制的第一张-->
</div>
<ul id="scrollBtn"><!--显示框>小圆点按钮-->
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:" class="arrowBtn left iconfont">&#xe620;</a><!--显示框>左右前后退按钮-->
<a href="javascript:" class="arrowBtn right iconfont">&#xe624;</a>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册