JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴


Posted in Javascript onOctober 28, 2016

这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊

布局什么的你们自己搞定吧

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

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
vue实现循环滚动列表
Jun 30 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 #Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 #Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 #Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 #Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 #Javascript
不使用script导入js文件的几种方法
Oct 27 #Javascript
JSON 必知必会 观后记
Oct 27 #Javascript
You might like
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
javascript globalStorage类代码
2009/06/04 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
Python中关于字符串对象的一些基础知识
2015/04/08 Python
在Python中处理XML的教程
2015/04/29 Python
Python编码类型转换方法详解
2016/07/01 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
详解python中index()、find()方法
2019/08/29 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
幼儿园门卫制度
2014/01/29 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
酒后驾车标语
2014/06/30 职场文书
人大调研汇报材料
2014/08/14 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server