English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. نص المقال

تقديم كود مشاركة لمظاهر العرض والتدوير باستخدام لوحة التدوير في JavaScript

هذا عرض منفرد قمت بإنشائه، يمكنكم النظر فيه، لم أقوم بعد بتحسينه. إذا كان لديكم أي تحسينات، يمكنكم التواصل معي بشكل خاص

تنظيم التخطيط بيدكم

<div class="slider" id="circle">
<اينك لينك هرف="" ><صورة مصدر="img/6p.jpg" ></اينك لينك>
`
<ول〉 كلاس="دائرة" >
<للى علىكليك="لون(1)" إيد="اىكو1">1</للى>
<للى علىكليك="لون(2)" إيد="اىكو2">2</للى>
<للى علىكليك="لون(3)" إيد="اىكو3">3</للى>
<للى علىكليك="لون(4)" إيد="اىكو4">4</للى>
<للى علىكليك="لون(5)" إيد="اىكو5">5</للى>
<للى كلاس="حالي" علىكليك="لون(6)" إيد="اىكو6">6</للى>
</ul>
<ديف كلاس="سهم">
<اينك لينك هرف="javaScript:;" كلاس="سهم-ش" علىكليك="بوي2()" إيد="بوي1"><</اينك لينك>
<اينك لينك هرف="javaScript:;" كلاس="سهم-ي" علىكليك="بوي1()" إيد="بوي2">></اينك لينك>
</div>
</div>
<سكرابت>
مفهوم c = 0;
مفهوم ت;
نافذة.التحميل = دالة () {
ت = زمن.إعدادمؤقت("بوي1()",5000);
}
دالة لون(num){
c = رقم;
مفهوم ptn = دوقوم.إيجادعنصرById("دائرة").إيجادعناصرباسم("صورة")[0];
لـ (مفهوم i = 1; i < 7; i++) {
مفهوم لى = دوقوم.إيجادعنصرById("دائرة").إيجادعناصرباسم("للى")[i-1];
ستايل لى.لون الخلفية = "#3E3E3E";
إذا (رقم == i) {
ptn.src = "img/"+ i + "p.jpg";
ستايل لى.لون الخلفية = "#B61B1F";
}
}
}
دالة فونكشن بوي1() {
إذا (c >= 6) {
c = 0;
}
c++;
lun(c);
}
دالة فونكشن بوي2() {
إذا (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>يُعد الممثل الرئيسي في أعمال الكاريكاتير اليابانية للفنان كيشي هيروكو من 'Naruto'. بسبب أنه يحمل على جسده أ被封印 بالكلاب الأسد الشيطانية، لم يكن له والدين، تعرض للاحتقار والتمييز من قبل السكان في القرية، فقد قرر أن يصبح الابن السادس للرئيس، لجعل الجميع ي认同 وجوده.</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="" src="images/2.jpg"/>
</div>
<div>
<h3>هيروتا هاتا</h3>
<p>
هي الشخصية رقم 3 للمرأة في عمل الكرتون الشهير 'Naruto' للرسام الياباني كيمورا تاكاشي. هي نينجا في قرية نينجا كونوها، ابنة رئيس العائلة الشهيرة نيشيغا. تحب ناروتو، كانت فتاة ضعيفة في البداية، ولكنها أصبحت قوية بفضل تأثير ناروتو وأصبحت نينجا ممتازة.</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 وتعديل شريط التمرير باستخدام عجلة الفأرة، آمل أن يكون هذا مفيدًا لك. إذا كان لديك أي استفسارات، فلا تتردد في ترك تعليق، وسأقوم بالرد عليك في أقرب وقت ممكن. وأشكركم أيضًا على دعمكم لموقع呐喊 لتعليم البرمجة!

دليل الأساسيات
أعجبك ذلك