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轮播图和自定义滚动条配合鼠标滚轮分享代码贴，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！