Heim > Artikel > Web-Frontend > Teilen Sie die Implementierungsmethode der automatischen oder manuellen Bildumschaltung von jQuery
Teilen Sie die Implementierungsmethode der automatischen oder manuellen Bildumschaltung von jQuery
- 小云云Original
- 2018-01-25 10:19:481179Durchsuche
Als ich JS lernte, sammelte ich viele interessante kleine Beispiele, aber es fiel mir schwer, einige gute Plattformen zu finden, um diese JS-Effekte zu zeigen. Heute habe ich RunJS entdeckt, eine Plattform zum Teilen von Code. Dieser Artikel stellt hauptsächlich den automatischen oder manuellen Bildwechseleffekt vor. Ich hoffe, er kann jedem helfen.
Beim Durchsuchen der Websites großer Einkaufszentren oder auf der Homepage einiger Websites werden einige Echtzeit-Umschaltbilder im Zusammenhang mit dieser Website angezeigt. In diesem Artikel wird ein Beispiel für die Verwendung von jQuery zur Realisierung der automatischen Umschaltung vorgestellt von Bildern.
Kerncode der Startseite (Default.aspx):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现图片切换</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tupianqiehuan.js"></script>
<link rel="stylesheet" type="text/css" href="css/tupianqiehuan.css">
</head>
<body>
<p class="wrapper">
<h1>jquer实现图片切换</h1>
<p id="focus">
<ul>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="images/02.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="images/03.jpg" alt="" /></a></li>
<li><a href="#" target="_blank"><img src="images/04.jpg" alt="" /></a></li><span style="white-space:pre"> </ul>
</p>
</p>
</body>
</html>CSS-Code (tupianqiehuan.css):
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
/* focus */
#focus{width:800px;height:280px;overflow:hidden;position:relative;}
#focus ul{height:380px;position:absolute;}
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
#focus ul li p{position:absolute;overflow:hidden;}
#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
#focus .btn span.on{background:#fff;}
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(http://sandbox.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}JS-Code (tupianqiehuan.js):
$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<p class='btnBg'></p><p class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</p><p class='preNext pre'></p><p class='preNext next'></p>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseover(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseover");
//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
//上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);//为当前的按钮切换到选中的效果
}
});Der spezifische Der Effekt ist in Ordnung. Sehen Sie sich die Effektdemonstration an
Hier gebe ich Ihnen zunächst eine Vorspeise und nehme mir später die Zeit, kurz darüber zu sprechen, wie Sie Ihr eigenes kleines Programm auf RunJS veröffentlichen und einige Tipps zur Verwendung geben RunJS.
Verwandte Empfehlungen:
Beispiel für die JavaScript-Implementierung der Bildwechselfunktion zur Mausradsteuerung
Detailliertes Beispiel für ein automatisches oder manuelles jQuery-Bild Wechseleffekt
Einführung in die Verwendung von JavaScript zum Erstellen von Bildwechseln
Das obige ist der detaillierte Inhalt vonTeilen Sie die Implementierungsmethode der automatischen oder manuellen Bildumschaltung von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!