这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家分享一段 js 轮播图和自定义滚动条的代码片段,布局和样式小编没给大家多介绍,大家可以根据个人需求优化,具体实现代码,大家可以参考下面代码片段
这是我自己做的一个轮播图, 大家可以看看 , 我还没进行优化. 有改进的地方可以私聊
布局什么的你们自己搞定吧
- <div class="slider" id="circle">
- <a href="">
- <img src="img/6p.jpg" alt="" />
- </a>
- `
- <ul class="circle">
- <li onclick="lun(1)" id="ico1">
- 1
- </li>
- <li onclick="lun(2)" id="ico2">
- 2
- </li>
- <li onclick="lun(3)" id="ico3">
- 3
- </li>
- <li onclick="lun(4)" id="ico4">
- 4
- </li>
- <li onclick="lun(5)" id="ico5">
- 5
- </li>
- <li class="current" onclick="lun(6)" id="ico6">
- 6
- </li>
- </ul>
- <div class="arrow">
- <a href="javascript:;" class="arrow-l" onclick="bo2()" id="bo1">
- <</a>
- <a href="javascript:;" class="arrow-r" onclick="bo1()" id="bo2">
- >
- </a>
- </div>
- </div>
- <script>
- var c = 0;
- var t;
- window.onload = function() {
- t = setInterval("bo1()", 5000);
- }
- function lun(num) {
- c = num;
- var ptn = document.getElementById("circle").getElementsByTagName("img")[0];
- for (var i = 1; i < 7; i++) {
- var li = document.getElementById("circle").getElementsByTagName("li")[i - 1];
- li.style.backgroundColor = "#3E3E3E";
- if (num == i) {
- ptn.src = "img/" + i + "p.jpg";
- li.style.backgroundColor = "#B61B1F";
- }
- }
- }
- function bo1() {
- if (c >= 6) {
- c = 0;
- }
- c++;
- lun(c);
- }
- function bo2() {
- if (c <= 1) {
- c = 7;
- }
- c--;
- lun(c);
- }
- </script>
下面看下自定义滚动条配合鼠标滚轮 DEMO
具体代码如下所示:
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8"/>
- <link href="CSS/reset.css" rel="stylesheet" type="text/css">
- <style type="text/css">
- body
- {
- font-size: 14px;
- font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;
- background: #111;
- }
- #content ul
- {
- width: 960px;
- margin: 150px auto;
- padding: 60px 0;
- }
- #content ul li
- {
- margin-right: 20px;
- width: 225px;
- height: 180px;
- float: left;
- }
- #content ul li:last-child
- {
- margin-right: 0;
- }
- #content ul li a
- {
- position: relative;
- display: block;
- width: 100%;
- height: 100%;
- /*舞台(动画元素的父容器)perspective*/
- -webkit-perspective: 800px;
- -moz-perspective: 800px;
- }
- #content ul li a > 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: .8s ease-in-out ;
- -moz-transition: .8s ease-in-out ;
- /*动画元素背后设置为hidden*/
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- }
- #content ul li a div:first-child
- {
- /*
- 绕y轴旋转
- */
- -webkit-transform: rotateY(0);
- -moz-transform: rotateY(0);
- z-index: 2;
- }
- #content ul li a div:last-child
- {
- background: url("images/bg.jpg") no-repeat 0 0;
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
- z-index: 1;
- }
- #content ul li a:hover div:first-child
- {
- -webkit-transform: rotateY(-180deg);
- -moz-transform: rotateY(-180deg);
- }
- #content ul li a:hover div:last-child
- {
- -webkit-transform: rotateY(0);
- -moz-transform: rotateY(0);
- }
- #content ul li a div h3
- {
- margin: 0 auto 15px;
- padding: 15px 0;
- width: 200px;
- height: 16px;
- line-height: 16px;
- font-size: 14px;
- text-align: center;
- border-bottom: 1px #fff dashed;
- }
- #content ul li a div p
- {
- padding: 0 10px;
- font-size: 12px;
- text-indent: 2em;
- line-height: 18px;
- }
- </style>
- </head>
- <body>
- <div id="content">
- <ul>
- <li>
- <a href="#" target="_blank">
- <div><img alt="" src="images/1.jpg"/></div>
- <div>
- <h3>漩涡鸣人</h3>
- <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在。</p>
- </div>
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <div>
- <img alt="" src="images/2.jpg"/>
- </div>
- <div>
- <h3>日向雏田</h3>
- <p>
- 日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者,木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人,原本是个性格柔弱的女孩,但是在鸣人的影响下逐渐变得坚强,并逐渐成长为一名优秀的忍者。</p>
- </div>
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <div><img alt="" src="images/3.jpg"/></div>
- <div>
- <h3>蒙奇·D·路飞</h3>
- <p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长,梦想是找到传说中的宝藏 —— ONE PIECE,成为海贼王。</p>
- </div>
- </a>
- </li>
- <li>
- <a href="#" target="_blank">
- <div>
- <img alt="" src="images/4.jpg"/>
- </div>
- <div>
- <h3>盒子先生</h3>
- <p>
- Danbo是一只用废纸盒DIY出来的可爱玩偶,圆圆的眼睛和三角形的嘴巴,时刻露出无辜的表情,让人看到就心软,Danbo是个纯真善良的小家伙,在它单纯的幻想世界里,总是透露出最纯真可爱的动人气息。</p>
- </div>
- </a>
- </li>
- </ul>
- </div>
- </body>
- </html>
以上所述是小编给大家介绍的 Javascript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0515/330821.html