current location： Home > Download > JS effects > jQuery effects > jQuery imitates 1688's home page advertising image switching
jQuery imitates 1688's home page advertising image switching
| Classify: JS effects / jQuery effects | Release time: 2017-12-22 | visits: 1114 |
| Download: 37 |
Latest Downloads
Fantasy Aquarium
Girls Frontline
Wings of Stars
Little Flower Fairy Fairy Paradise
Restaurant Cute Story
Shanhe Travel Exploration
Love and Producer
The most powerful brain 3
Odd Dust: Damila
Young Journey to the West 2
24 HoursReading Leaderboard
- 1 How to Exclude Go Source Files Based on Architecture During Compilation?
- 2 Can MySQL JSON Fields Be Used for Table Joining?
- 3 djsalert.loc - What is djsalert.loc?
- 4 Why Isn\'t My Python `main()` Function Running?
- 5 How to Convert Timestamps to Human-Readable Dates and Times in PHP?
- 6 dlbkcoms.exe - What is dlbkcoms.exe?
- 7 Is Declaring Global Variables Inside Functions Without \"var\" a RAM Optimization Strategy?
- 8 When and Why Are Parentheses Used in C Variable Declarations?
- 9 Why am I getting \"too many arguments\" when passing a struct to a function?
- 10 How do I fix the \"415 Unsupported Media Type\" error in my Jersey REST service when sending JSON data in POST requests?
- 11 dll32phi.dll - What is dll32phi.dll?
- 12 How does std::bind handle member functions, and why is an object reference required?
- 13 Does MinGW-w64 with the Win32 threading model support std::thread natively?
- 14 Why Can\'t My Go Webserver Play MP4 Videos?
- 15 How to Split Keywords for Database Optimization: An Efficient PHP and MySQL Approach?
Latest Tutorials
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
- Go language practical GraphQL
- 1932 2024-04-19
-
- 550W fan master learns JavaScript from scratch step by step
- 3349 2024-04-18
-
- Getting Started with MySQL (Teacher mosh)
- 1755 2024-04-07
-
- Mock.js | Axios.js | Json | Ajax--Ten days of quality class
- 2568 2024-03-29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery首页广告图片切换 </title>
<style type="text/css">
div,ul,li,a,span,img{margin:0;padding:0;}
li{list-style:none;}
#slider{width:790px;height:340px;margin:10% auto;position:relative;}
.slider_list li{position:absolute;display:none;}
.slider_list li:first-child{display:block;}
.slider_icon{position:absolute;z-index:1;left:40%;bottom:20px;font-size:0;padding:4px 8px;border-radius:12px;background-color:hsla(0,0%,100%,.3);}
.slider_icon i{display:inline-block;width:12px;height:12px;border-radius:50%;margin:0 5px;}
.btn{background:#fff;}
.arrow{display:none;width:30px;height:60px;background-color:rgba(0,0,0,.2);position:absolute;top:50%;margin-top:-30px;}
.prve{left:0;}
.next{right:0;}
.arrow span{display:block;width:10px;height:10px;border-bottom:2px solid #fff;border-left:2px solid #fff;}
.slider_left{margin:25px 0 0 10px;transform:rotate(45deg);}
.slider_right{margin:25px 0 0 5px;transform:rotate(-135deg);}
.arrow:hover{background:#444;}
#slider:hover .arrow{display:block;}
.btn_act{background:#db192a;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
var count = 0;
var $li = $("#slider>ul>li");
$(".next").click(function(){
count ;
if(count == $li.length){
count =0;
}
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
console.log(count);
});
$(".prve").click(function(){
count--;
if(count == -1){
count = $li.length-1;
}
console.log(count);
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
});
$(".slider_icon i").mouseenter(function(){
$(this).addClass('btn_act').siblings().removeClass("btn_act");
$li.eq($(this).index()).fadeIn().siblings().fadeOut();
count = $(this).index();
});
});
</script>
</head>
<body>
<div id="slider">
<ul class="slider_list">
<li><a href="#"><img src="img/59e5df51Na34c52da.jpg"></a></li>
<li><a href="#"><img src="img/59e6f772Nde97ca5e.jpg"></a></li>
<li><a href="#"><img src="img/59e8ab7dN48b529e7.jpg"></a></li>
<li><a href="#"><img src="img/59e89be7N0031c258.jpg"></a></li>
<li><a href="#"><img src="img/59e980a2Nc4314079.jpg"></a></li>
<li><a href="#"><img src="img/59ed6dd8Ncaee86ed.jpg"></a></li>
<li><a href="#"><img src="img/59e99072N4baea8f3.jpg"></a></li>
<li><a href="#"><img src="img/598abe52Nb1c8cfe4.jpg"></a></li>
</ul>
<div class="slider_icon">
<i class="btn btn_act"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</div>
<a href="javascript:;" class="arrow prve">
<span class="slider_left"></span>
</a>
<a href="javascript:;" class="arrow next">
<span class="slider_right"></span>
</a>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
这是一个jQuery仿1688的首页广告图片切换，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。
Related recommendations
Mobile Happy Scratch HTML5 plug-in
HTML5 paper folded into gift box animation special effects
Pure CSS3 retro film player special effects
HTML5 video player window floating code
Lightweight html5 WinBox page pop-up plug-in
jQuery accordion picture sliding menu bar
Pure CSS3 code to create red drop-down navigation menu
HTML5 mouse wheel rotation picture display special effects
Popular Recommendations
jQuery+Html5 realizes beautiful confession animation code
Couple's romantic confession js special effects code
H5 panda bouncing game source code
H5 3D rolling ball game source code
Simple js love confession artifact
Bunker's html5 particle animation expressive effects