JavaScript 슬라이드 쇼 및 사용자 정의 스크롤 바와 마우스 루프 공유 코드

이것은 저가 만든 슬라이드 쇼입니다. 모두들 확인해 보세요, 아직 최적화를 하지 않았습니다. 개선할 점이 있다면 개인적으로 연락주세요

구성은 여러분이 직접 처리해 주세요

<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는 뜨거운 박스로 만들어진 귀여운 장난감입니다. 둥글고 삼각형 모양의 입이 항상 무고한 표정을 띠고 있습니다. 그를 보면 마음이 따뜻해집니다. Danbo는 진실된 선한 소년이며, 그의 단순한 꿈 세계에서는 가장 진실된 귀여운 분위기를 풍긋게 합니다./p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>

위에서 설명한 JavaScript 슬라이더와 커스텀 스크롤바를 마우스 휠과 함께 공유하는 코드를 소개했습니다. 여러분께 도움이 되길 바랍니다. 어떤 질문이 있으시면 알려주세요. 저는 즉시 답변 드리겠습니다. 또한, 나아라 튜토리얼 웹사이트에 대한 여러분의 지지에 깊이 감사드립니다.

기본 가이드

추천해드립니다