Jquery自动切换图片

最新推荐文章于 2021-08-06 18:23:16 发布

原创最新推荐文章于 2021-08-06 18:23:16 发布 · 545 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个基于jQuery的图片轮播插件实现方法，包括自动轮播、手动选择图片及鼠标悬停暂停等功能。该插件适用于网页设计中需要展示多张图片的场景。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<link href="XjhHomePage.css" rel="stylesheet" type="text/css"/>
<script>
//jquery 图片自动切换
$(function ()
{
var ul = $(".lxfscroll");
var li = $(".lxfscroll li");

</html>

/*XhjHomePage.css*/

.focus
{
width: 536px;
margin-left: 0;
margin-right: auto;
margin-top: 10px;
position: relative;
height: 300px; /*border: 4px solid #EFEFEF;*/
overflow: hidden;
}
ul
{
margin:0px;
padding:0px;
}
.focus .lxfscroll
{
/*width: 536px;
margin-left: 0;
margin-right: auto;*/
margin-top: 0px;

position: relative;
/*border: 4px solid #EFEFEF;*/
list-style: none;
}

.focus .lxfscroll li
{
height: 300px;
width: 536px;
text-align: center;
height: 278px;
position: absolute;
font-size: 40px;
font-weight: bold;
}

.lxfscroll-title
{
position:absolute;
display:block;
height: 7px;
width: 536px;
text-align: center;
margin-top: 284px;
}

.focus .lxfscroll-title li
{
width: 30px;
height: 8px;
margin: 0 10px;
background-color: #e6e6e6;
display: inline-block;
_display: inline;
overflow: hidden;
vertical-align: top;
zoom: 1;
line-height: 40px;
cursor: pointer;
}

.focus .lxfscroll-title .hover
{
background-color: #b01b15;
}