鼠标移动，图片自动切换（简化版）

最新推荐文章于 2018-11-09 07:27:53 发布

david_yellow

最新推荐文章于 2018-11-09 07:27:53 发布

阅读量989

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/tarenahuangdw/article/details/44095753

jquery 专栏收录该内容

6 篇文章

订阅专栏

这段代码展示了如何通过HTML和CSS实现鼠标移动时图片自动切换的效果。主要使用了一个包含多个背景图片的ul列表，当鼠标悬停时，通过改变背景图片的位置来达到切换效果。此外，还包含了前进和后退按钮的样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</body></html>

@charset "utf-8";
*{margin:0;padding:0;list-style:none;border:0;}
img{ border:none;}

.main_image {
width:100%;
height:422px;
border-top:1px solid #d7d7d7;
overflow:hidden;
margin:0 auto;
position:relative
}
.main_image ul {
width:9999px;
height:422px;
overflow:hidden;
position:absolute;
top:0;
left:0
}
.main_image li {
float:left;
width:100%;
height:422px;
}
.main_image li span {
display:block;
width:100%;
height:422px
}
.main_image li a {
display:block;
width:100%;
height:422px
}
.main_image li .img_1 {
background: url('../images/img_main_1.jpg') center top no-repeat
}
.main_image li .img_2 {
background: url('../images/img_main_2.jpg') center top no-repeat
}
.main_image li .img_3 {
background: url('../images/img_main_3.jpg') center top no-repeat
}
.main_image li .img_4 {
background: url('../images/img_main_4.jpg') center top no-repeat
}
.main_image li .img_5 {
background: url('../images/img_main_5.jpg') center top no-repeat
}
div.flicking_con {
width:990px;
margin:0 auto;
position:relative
}
div.flicking_con .flicking_inner {
position:absolute;
top:360px;
left:90px;
z-index:999;
width:300px;
height:21px
} /* 121126 */
div.flicking_con a {
float:left;
width:21px;
height:21px;
margin:0;
padding:0;
/* background:url('../images/btn_main_img.png') 0 0 no-repeat; */
display:block;
/* text-indent:-1000px */
}
div.flicking_con a.on {
background-position:0 -21px
}
#btn_prev, #btn_next {
z-index:11111;
position:absolute;
display:block;
width:73px!important;
height:74px!important;
top:50%;
margin-top:-37px;
display:none;
}
#btn_prev {
background:url(../images/hover_left.png) no-repeat left top;
left:100px;
}
#btn_next {
background:url(../images/hover_right.png) no-repeat right top;
right:100px;
}