JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
这是我自己做的一个轮播图,大家可以看看,我还没进行优化.有改进的地方可以私聊
布局什么的你们自己搞定吧
<divclass="slider"id="circle"> <ahref=""><imgsrc="img/6p.jpg"alt=""/></a> ` <ulclass="circle"> <lionclick="lun(1)"id="ico1">1</li> <lionclick="lun(2)"id="ico2">2</li> <lionclick="lun(3)"id="ico3">3</li> <lionclick="lun(4)"id="ico4">4</li> <lionclick="lun(5)"id="ico5">5</li> <liclass="current"onclick="lun(6)"id="ico6">6</li> </ul> <divclass="arrow"> <ahref="javaScript:;"class="arrow-l"onclick="bo2()"id="bo1"><</a> <ahref="javaScript:;"class="arrow-r"onclick="bo1()"id="bo2">></a> </div> </div> <script> varc=0; vart; window.onload=function(){ t=setInterval("bo1()",5000); } functionlun(num){ c=num; varptn=document.getElementById("circle").getElementsByTagName("img")[0]; for(vari=1;i<7;i++){ varli=document.getElementById("circle").getElementsByTagName("li")[i-1]; li.style.backgroundColor="#3E3E3E"; if(num==i){ ptn.src="img/"+i+"p.jpg"; li.style.backgroundColor="#B61B1F"; } } } functionbo1(){ if(c>=6){ c=0; } c++; lun(c); } functionbo2(){ if(c<=1){ c=7; } c--; lun(c); } </script>
下面看下自定义滚动条配合鼠标滚轮DEMO
具体代码如下所示:
<!DOCTYPEhtml> <html> <head> <title></title> <metacharset="utf-8"/> <linkhref="css/reset.css"rel="stylesheet"type="text/css"> <styletype="text/css"> body { font-size:14px; font-family:MicrosoftYaHei,Tahoma,Geneva,sans-serif; background:#111; } #contentul { width:960px; margin:150pxauto; padding:60px0; } #contentulli { margin-right:20px; width:225px; height:180px; float:left; } #contentulli:last-child { margin-right:0; } #contentullia { position:relative; display:block; width:100%; height:100%; /*舞台(动画元素的父容器)perspective*/ -webkit-perspective:800px; -moz-perspective:800px; } #contentullia>div { position:absolute; left:0; height:0; width:100%; height:100%; color:#fff; /*动画元素transform-style*/ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -webkit-transition:.8sease-in-out; -moz-transition:.8sease-in-out; /*动画元素背后设置为hidden*/ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; } #contentulliadiv:first-child { /* 绕y轴旋转 */ -webkit-transform:rotateY(0); -moz-transform:rotateY(0); z-index:2; } #contentulliadiv:last-child { background:url("images/bg.jpg")no-repeat00; -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); z-index:1; } #contentullia:hoverdiv:first-child { -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg); } #contentullia:hoverdiv:last-child { -webkit-transform:rotateY(0); -moz-transform:rotateY(0); } #contentulliadivh3 { margin:0auto15px; padding:15px0; width:200px; height:16px; line-height:16px; font-size:14px; text-align:center; border-bottom:1px#fffdashed; } #contentulliadivp { padding:010px; font-size:12px; text-indent:2em; line-height:18px; } </style> </head> <body> <divid="content"> <ul> <li> <ahref="#"target="_blank"> <div><imgalt=""src="images/1.jpg"/></div> <div> <h3>漩涡鸣人</h3> <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在。</p> </div> </a> </li> <li> <ahref="#"target="_blank"> <div> <imgalt=""src="images/2.jpg"/> </div> <div> <h3>日向雏田</h3> <p> 日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者,木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人,原本是个性格柔弱的女孩,但是在鸣人的影响下逐渐变得坚强,并逐渐成长为一名优秀的忍者。</p> </div> </a> </li> <li> <ahref="#"target="_blank"> <div><imgalt=""src="images/3.jpg"/></div> <div> <h3>蒙奇·D·路飞</h3> <p>蒙奇·D·路飞是日本人气动漫《海贼王》中的主人公。是日本人气动漫《海贼王》中的主人公。草帽海贼团船长,梦想是找到传说中的宝藏——ONEPIECE,成为海贼王。</p> </div> </a> </li> <li> <ahref="#"target="_blank"> <div> <imgalt=""src="images/4.jpg"/> </div> <div> <h3>盒子先生</h3> <p> Danbo是一只用废纸盒DIY出来的可爱玩偶,圆圆的眼睛和三角形的嘴巴,时刻露出无辜的表情,让人看到就心软,Danbo是个纯真善良的小家伙,在它单纯的幻想世界里,总是透露出最纯真可爱的动人气息。</p> </div> </a> </li> </ul> </div> </body> </html>
以上所述是小编给大家介绍的JavaScript轮播图和自定义滚动条配合鼠标滚轮分享代码贴,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!