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 相关文章推荐
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
AngularJS Controller作用域
Jan 09 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP创建XML接口示例
2019/07/04 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
python中cPickle用法例子分享
2014/01/03 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python 代码运行时间获取方式详解
2020/09/18 Python
python源文件的字符编码知识点详解
2021/03/04 Python
小学毕业演讲稿
2014/04/25 职场文书
禁毒宣传工作方案
2014/05/23 职场文书