脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 轮播图 滚动条

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

 更新时间：2016年10月28日 08:54:15   投稿：mrr  
本文给大家分享一段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 轮播图和自定义滚动条配合鼠标滚轮分享代码贴，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JavaScript代码异常监控实现过程详解

    JavaScript代码异常监控实现过程详解

    这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

    JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

    ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能，通过本篇文章给大家介绍JavaScript中使用sencha gridpanel 编辑单元、改变单元格颜色，感兴趣的朋友一起学习
    2015-11-11
  • 微信小程序连接服务器展示MQTT数据信息的实现

    微信小程序连接服务器展示MQTT数据信息的实现

    这篇文章主要介绍了微信小程序连接服务器展示MQTT数据信息的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • JS实现的车标图片提示效果代码

    JS实现的车标图片提示效果代码

    这篇文章主要介绍了JS实现的车标图片提示效果代码,涉及JavaScript鼠标事件触发页面元素遍历修改的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Echarts图表位置调整的图文教程

    Echarts图表位置调整的图文教程

    实际过程中你会发现图表在div中的位置不太理想,这时怎么去调整呢?下面这篇文章主要给大家介绍了关于Echarts图表位置调整的相关资料,需要的朋友可以参考下
    2022-10-10
  • TypeScript中Array(数组)声明与简单使用方法

    TypeScript中Array(数组)声明与简单使用方法

    这篇文章主要给大家介绍了关于TypeScript中Array(数组)声明与简单使用的相关资料,TypeScript Array(数组)数组对象是使用单独的变量名来存储一系列的值,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • JS库中的Particles.js在vue上的运用案例分析

    JS库中的Particles.js在vue上的运用案例分析

    这篇文章主要介绍了JS库中的Particles.js在vue上的运用案例分析,需要的朋友可以参考下
    2017-09-09
  • js中base64与file之间的转换方法

    js中base64与file之间的转换方法

    这篇文章主要给大家介绍了关于js中base64与file之间的转换方法,最近项目中需要实现把图片的base64编码转成file文件的功能,然后再上传至服务器,需要的朋友可以参考下
    2023-09-09
  • JS中数学计算精度问题的解决方案

    JS中数学计算精度问题的解决方案

    这篇文章主要给大家介绍了JS中数学计算精度问题的解决方案,文中通过代码示例和图文结合给大家讲解非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • 微信小程序实现两个页面传值的方法分析

    微信小程序实现两个页面传值的方法分析

    这篇文章主要介绍了微信小程序实现两个页面传值的方法,结合实例形式分析了微信小程序URL跳转及页面传值相关操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12

最新评论