jQuery实现图片与文字描述左右滑动自动切换的方法

网络编程 2024/11/20 佚名

3 2 1

本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法。分享给大家供大家参考。具体如下：

这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效。一边飞出一边变淡的效果非常漂亮，带小按钮。

效果图如下：

具体代码如下：

<!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" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>JQUERY图片切换特效带标题和描述纯JS CSS打造 - </title>
<style type="text/css">
/* YUI reset */
* {margin:0; padding:0;}
/* body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;} */
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul,li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
/* my */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {zoom:1;}
body {color:#333; font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif;}
a {text-decoration:none; color:#333;}
a:hover {text-decoration:underline;}
.focus {width:600px; height:250px; background:#eee; margin:10px auto; position:relative; overflow:hidden;}
.focus ul {}
.focus li {width:550px; height:200px; padding:25px; position:absolute; left:600px; top:0;}
.focus li h5, .focus li p, .focus li a.button {float:left; position:relative;}
.focus li h5 {width:300px; font-size:22px; font-family:"Microsoft YaHei";}
.focus li p {width:300px; line-height:22px; font-size:14px; margin:1em 0;}
.focus li a.button {width:100px; height:30px; background:#333; cursor:pointer; display:none;}
.focus li a.button:hover {background:#666;}
.focus li div.imgBox {float:right; width:200px; height:200px; position:relative; background:#dddddd;}
.focus li div.imgBox img {width:200px; height:200px;}
.focus .btn {position:absolute; width:600px; height:6px; padding:10px; text-align:center; left:0; bottom:0;}
.focus .btn span {display:inline-block; width:10px; height:6px; background:#999; margin:0 3px;}
.focus .btn span.on {background:#000;}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

希望本文所述对大家的jquery程序设计有所帮助。

jQuery,图片,文字描述,滑动,切换