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 相关文章推荐
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
微信小程序 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
Banner程序
2006/10/09 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php中的静态变量的基本用法
2014/03/20 PHP
yii的CURD操作实例详解
2014/12/04 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python复制文件操作实例详解
2015/11/10 Python
Python操作csv文件实例详解
2017/07/31 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
基于python调用psutil模块过程解析
2019/12/20 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
工作表现自我评价
2014/02/08 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书