كما هو مبين في الشكل.
تأثير تبديل الصورة بسيط للغاية للتنفيذ وله توافق جيد.
صفحة HTML كما يلي
نسخة الكود كما يلي:
<viv>
<div id = "focus">
<ul>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/01.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/02.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/03.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/04.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/05.jpg"/> </a> </li>
</ul>
</div>
</div> <!-نهاية الغلاف->
</body>
نمط CSS
نسخة الكود كما يلي:
<type type = "text/css">
* {الهامش: 0 ؛ الحشو: 0 ؛}
الجسم {font-size: 12px ؛ اللون:#222 ؛ Font-Family: Verdana ، Arial ، Helvetica ، Sans-Serif ؛ الخلفية:#f0f0f0 ؛}
.clearfix: بعد {content: "." ؛ العرض: كتلة ؛ الارتفاع: 0 ؛ واضح: كلاهما ؛ الرؤية: مخفية ؛}
.clearfix {Zoom: 1 ؛}
ul ، li {list-style: none ؛}
img {الحدود: 0 ؛}
.wrapper {العرض: 800px ؛ الهامش: 0 Auto ؛ حشوة القاع: 50 بكسل ؛}
/ * QQShop Focus */
#focus {width: 800px ؛ الارتفاع: 280 بكسل ؛ الفائض: مخفي. الموقف: قريب ؛}
#focus ul {height: 380px ؛ الموقف: مطلق ؛}
#focus ul li {float: left ؛ العرض: 800 بكسل ؛ الارتفاع: 280 بكسل ؛ الفائض: مخفي. الموقف: قريب الخلفية:#000 ؛}
#focus ul li div {position: absolute ؛ الفائض: مخفي ؛}
#focus .btnbg {position: absolute ؛ العرض: 800 بكسل ؛ الارتفاع: 20 بكسل ؛ اليسار: 0 ؛ أسفل: 0 ؛ الخلفية:#000 ؛}
#focus .btn {الموضع: absolute ؛ العرض: 780 بكسل ؛ الارتفاع: 10 بكسل ؛ الحشو: 5px 10px ؛ اليمين: 0 ؛ أسفل: 0 ؛ محاذاة النص: يمين ؛}
#focus .btn span {display: inline block ؛ _display: inline ؛ _zoom: 1 ؛ العرض: 25 بكسل ؛ الارتفاع: 10 بكسل ؛ _font-size: 0 ؛ الهامش اليساري: 5px ؛ المؤشر: مؤشر. الخلفية: #fff ؛}
#focus .btn span.on {background: #fff ؛}
#focus .prenext {width: 45px ؛ الارتفاع: 100px ؛ الموقف: مطلق ؛ أعلى: 90 بكسل ؛ الخلفية: url (img/sprite.png) no-repeat 0 0 ؛ المؤشر: مؤشر ؛}
#focus .pre {left: 0 ؛}
#focus .next {right: 0 ؛ خلفية الموضع: أعلى يمين ؛}
</style>
نص JS
نسخة الكود كما يلي:
$ (function () {
var swidth = $ ("#focus"). width () ؛ // احصل على عرض خريطة التركيز (منطقة العرض)
var len = $ ("#focus ul li"). الطول ؛ // احصل على عدد صور التركيز
فارس فهرس = 0 ؛
فار بيتيمر.
// يضيف الرمز التالي الزر الرقمي والشريط الشفاف خلف الزر ، بالإضافة إلى زرين في الصفحة السابقة والصفحة التالية
var btn = "<div class = 'btnbg'> </viv> <div class = 'btn'>" ؛
لـ (var i = 0 ؛ i <len ؛ i ++) {
btn += "<span> </span>" ؛
}
btn += "</viv> <div class = 'prenext pre'> </viv> <div class = 'prenext next'> </viv>" ؛
$ ("#focus"). إلحاق (BTN) ؛
$ ("#focus .btnbg"). css ("التعتيم" ، 0.5) ؛
// أضف شريحة ماوس في الحدث للزر الصغير لعرض المحتوى المقابل
$ ("#focus .btn span").
الفهرس = $ ("#Focus .BTN span"). الفهرس (هذا) ؛
showpics (الفهرس) ؛
}). eq (0) .trigger ("mouseenter") ؛
// الصفحة السابقة والصفحة التالية معالجة الشفافية
$ ("#focus .prenext").
$ (this) .stop (true ، false) .animate ({"opabity": "0.5"} ، 300) ؛
}،وظيفة() {
$ (this) .stop (true ، false) .animate ({"opabity": "0.2"} ، 300) ؛
}) ؛
// زر الصفحة السابقة
$ ("#Focus .Pre"). انقر فوق (function () {
الفهرس -= 1 ؛
if (index == -1) {index = len - 1 ؛}
showpics (الفهرس) ؛
}) ؛
// زر الصفحة التالية
$ ("#Focus .Next"). انقر فوق (function () {
الفهرس += 1 ؛
if (index == len) {index = 0 ؛}
showpics (الفهرس) ؛
}) ؛
// هذا المثال يتم تمريره إلى اليسار واليمين ، أي أن جميع عناصر li تطفو على اليسار في نفس الصف ، لذلك يجب حساب عرض عناصر UL المحيطية هنا.
$ ("#focus ul"). css ("width" ، swidth * (len)) ؛
// يتوقف التشغيل التلقائي عندما ينزلق الماوس على صورة التركيز ، ويبدأ عندما ينزلق الماوس.
$ ("#focus"). hover (function () {
Clearinterval (Pictimer) ؛
}،وظيفة() {
Pictimer = setInterval (function () {
showpics (الفهرس) ؛
فهرس ++ ؛
if (index == len) {index = 0 ؛}
} ، 4000) ؛ // يمثل هذا 4000 فاصل التشغيل التلقائي ، الوحدة: مللي ثانية
}). الزناد ("mouseLeave") ؛
// أظهر وظيفة الصورة ، وعرض المحتوى المقابل وفقًا لقيمة الفهرس المستلمة
وظيفة showpics (الفهرس) {// التبديل العادي
var nowleft = -index*swidth ؛ // احسب القيمة اليسرى لعنصر UL بناءً على قيمة الفهرس
$ ("#focus ul"). توقف (صحيح ، خطأ) .animate ({"left": nowleft} ، 300) ؛ // قم بالتمرير لعنصر UL من خلال ANIMATION () إلى الموضع المحسوب
// $ ("#focus .btn span"). removeClass ("on"). Eq (index) .addClass ("on") ؛ // قم بالتبديل إلى التأثير المحدد للزر الحالي
$ ("#focus .btn span"). توقف (صواب ، خطأ) .animate ({"opitated": "0.4" ، 300) .eq (index) .stop (true ، false) .animate ({"opitated": "1"} ، 300) ؛ // قم بالتبديل إلى التأثير المحدد للزر الحالي
}
}) ؛
تستخدم الصور اليسرى واليمين