快捷導(dǎo)航

JavaScript 輪播圖和自定義滾動(dòng)條配合鼠標(biāo)滾輪分享代碼貼

更新時(shí)間：2016年10月28日 08:54:15 投稿：mrr

本文給大家分享一段js輪播圖和自定義滾動(dòng)條的代碼片段，布局和樣式小編沒給大家多介紹，大家可以根據(jù)個(gè)人需求優(yōu)化，具體實(shí)現(xiàn)代碼，大家可以參考下面代碼片段

這是我自己做的一個(gè)輪播圖,大家可以看看 ,我還沒進(jìn)行優(yōu)化.有改進(jìn)的地方可以私聊

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

<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>

下面看下自定義滾動(dòng)條配合鼠標(biāo)滾輪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%;
/*舞臺(tái)（動(dòng)畫元素的父容器）perspective*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#content ul li a > div
{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
color: #fff;
/*動(dòng)畫元素transform-style*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
-moz-transition: .8s ease-in-out ;
/*動(dòng)畫元素背后設(shè)置為hidden*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#content ul li a div:first-child
{
/*
繞y軸旋轉(zhuǎn)
*/
-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>日本漫畫家岸本齊史作品《火影忍者》中男主角。因?yàn)樯砩戏庥≈皭旱木盼惭?，無父無母的他受盡了村人的冷眼與歧視，他下定決心要成為第六代火影，讓所有人都認(rèn)同他的存在。</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/2.jpg"/>
</div>
<div>
<h3>日向雛田</h3>
<p>
日本漫畫家岸本齊史作品《火影忍者》中的3號(hào)女主角。木葉忍者村的女忍者，木葉名門日向一族宗家族長(zhǎng)的長(zhǎng)女。喜歡漩渦鳴人，原本是個(gè)性格柔弱的女孩，但是在鳴人的影響下逐漸變得堅(jiān)強(qiáng)，并逐漸成長(zhǎng)為一名優(yōu)秀的忍者。</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div><img alt="" src="images/3.jpg"/></div>
<div>
<h3>蒙奇·D·路飛</h3>
<p>蒙奇·D·路飛 是日本人氣動(dòng)漫 《海賊王》中的主人公。是日本人氣動(dòng)漫 《海賊王》中的主人公。草帽海賊團(tuán)船長(zhǎng)，夢(mèng)想是找到傳說中的寶藏 —— 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出來的可愛玩偶，圓圓的眼睛和三角形的嘴巴，時(shí)刻露出無辜的表情，讓人看到就心軟，Danbo是個(gè)純真善良的小家伙，在它單純的幻想世界里，總是透露出最純真可愛的動(dòng)人氣息。</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>

以上所述是小編給大家介紹的JavaScript 輪播圖和自定義滾動(dòng)條配合鼠標(biāo)滾輪分享代碼貼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: