English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Das ist ein von mir erstellter Slideshow, den alle überprüfen können, ich habe ihn noch nicht optimiert. Es gibt Verbesserungsmöglichkeiten, Sie können mich persönlich kontaktieren
Legen Sie sich um die Anordnung selbst kümmern
<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;++ ) {
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>
Nun schauen wir uns das DEMO mit benutzerdefinierten Scrollbalken und Mausrad an
Konkretes Code wie folgt:
!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-Familie: 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%;
/*Bühne (Elterncontainer des animierenden Elements) 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 des animierenden Elements-style*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
-moz-transition: .8s ease-in-out ;
/*setze den Hintergrund der animierenden Elemente auf hidden*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#content ul li a div:first-child
{
/*
um die Y-Achse drehen
*/
-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>Sakura Uchiha</h3>
<p>Der Hauptcharakter der japanischen Comic-Serie 'Naruto', ein Junge, der von dem bösen Neunflügel-Fuchs besessen ist, der keine Eltern hat und von den Dorfbewohnern verachtet und diskriminiert wird, hat beschlossen, der sechste Hokage zu werden, um die Anerkennung aller zu erhalten.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/2.jpg"/>
</div>
<div>
<h3>Naruto Uzumaki</h3>
<p>
Das Werk des japanischen Zeichners Kishimoto Masashi 'Naruto'.3Die Hauptfigur der japanischen Comic-Serie 'Naruto', eine Ninja der Sunagakure, die älteste Tochter des Hausherrn des Clans Uchiha, die Naruto liebt, war ursprünglich ein weichherziger Junge, aber unter dem Einfluss von Naruto wurde er allmählich stärker und wuchs zu einem ausgezeichneten Ninja heran.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div><img alt="" src="images/3.jpg"/></div>
<div>
<h3>Monkey D. Luffy</h3>
<p>Monkey D. Luffy ist der Hauptcharakter der japanischen beliebten Anime-Serie 'One Piece'. Er ist der Kapitän der Straw Hat Pirates, sein Traum ist es, die legendarische Schatz zu finden - ONE PIECE, und zum König der Piraten zu werden.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/4.jpg"/>
</div>
<div>
<h3>Herr Kiste</h3>
<p>
Danbo ist ein süßes Spielzeug, das aus alten Pappkartons DIY ist, mit runden Augen und einem dreieckigen Mund, das ständig ein unschuldiges Aussehen zeigt, das die Herzen weich macht. Danbo ist ein rein und gutmütiges Kleines, in seiner einfachen Phantasiewelt immer die reinste und süßeste Anziehungskraft ausstrahlend.</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
Das sind die von mir vorgestellten JavaScript-Slider und benutzerdefinierte Scrollbalken, die mit der Mausradfunktion zusammengetragen werden, und ich hoffe, dass sie Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht, und ich werde rechtzeitig antworten. Ich möchte auch sehr danken, dass Sie die Unterstützung der Website 'Ruf nach der Anleitung' zeigen!